# api_socket_test_report

**Repository Path**: landashu/api_socket_test_report

## Basic Information

- **Project Name**: api_socket_test_report
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-06-07
- **Last Updated**: 2024-06-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# socket 测试

![img.png](image/socket/img.png)

![img.png](image/socket/img_1.png)

最高700+次，占带宽约118MB/s

![img.png](image/socket/img_2.png)

0.8kb 11000+次/s

![img.png](image/socket/img_3.png)

socket 没有出现断开的情况，跑到了百次，示例是没有重新连接的，socket 可以写重连，只是如果断联比较频繁我觉得没必要

# SSE 测试

![img.png](image/sse/img.png)

![img.png](image/sse/img_1.png)

最高1000+次，占带宽约169MB/s

![img.png](image/sse/img_2.png)

0.8kb 12000+次/s

![img.png](image/sse/img_3.png)

SSE 在跑到第15次自动断开，经不住长时间压测，示例是没有重新连接的，SSE 可以写重连，只是如果断联比较频繁我觉得没必要

# echarts 测试
项目中肯定会图表，但大数量下图表会有失帧和卡顿的问题,为复现问题的产生以及更好的优化图表展示,特创建此项目来模拟echarts在大数据下图表的状态。

## bar3D 柱图测试
![img.png](image/echarts/bar3d/img.png)

### 优化
在项目中，若使用直接更新option所有属性方式,用法如下
```js
let option = {
    title: {},
    tooltip: {},
    dataset: {
        // 数据
        source: []
    },
    series: [],
    // ...
}
// 监听数据变化,重新渲染echarts
watch: {
    option: (old,news) =>{
        echarts.setOption(news)
    }
}
```
在数据频繁更新的情况下,若数据量较大,会有图表闪烁的问题,因为 setOption 不止会重新渲染数据,对于其他部分也会重新渲染(如上方式还会造成旋转或滚动窗口后,若数据重新渲染,视图会恢复起点).
优化可以把 setOption(option,notMerge) 中 notMerge 设置为 true,仅会渲染option有变更的地方.但测试不是很理想,在 50ms 刷1万条数据会频繁闪烁.
最终尝试 调用setOption(option),把 option 数据部分只做传递,效果比如上要好,代码如下:
```js
let data = [] // 模拟数据
echarts.setOption({
    dataset.source: data
})
```

### 测试

| 时间(ms) | 测试数据 | 结果       |
|--------|------|----------|
| 10     | 1万   | 有卡顿,有闪烁  |
| 20     | 1万   | 无卡顿,无闪烁  |
| 20     | 2万   | 无卡顿,无闪烁  |
| 50     | 2万   | 略微卡顿,无闪烁 |
| 50     | 3万   | 中等卡顿,有闪烁 |
| 100    | 2万   | 略微卡顿,无闪烁 |
| 100    | 3万   | 中等卡顿,无闪烁 |
| 100    | 4万   | 中上卡顿,无闪烁 |
| 150    | 2万   | 略微卡顿,无闪烁 |
| 150    | 3万   | 中等卡顿,无闪烁 |