webSocket推送太快导致前端渲染卡顿问题优化

优化思路：
把webSocket接收到的数据用一个数组存起来，达到一定长度再统一渲染，可根据推送数据的速度适当调解数组长度限制，如果一段时间内改数组长度打不要渲染条件，就用定时器之间渲染

data() {
return {
tempDataWsList: [], // 存放临时ws数据数组
list: [], // 页面上的列表
listCopy: [], // 深拷贝的初始化列表数据，用于统一渲染
}
}
methods: {
...
// websocket接收数据的方法
onMessage(data) {
if (data.data) {
// 将Json字符串转译
const dataWs = JSON.parse(data.data);
// 将转译后的数据推入临时ws数据数组中
this.tempDataWsList.push(dataWs);
// 有ws数据就关闭定时器
clearTimeout(this.wsTimeout);
// 做缓存渲染,将ws接收到的数据放到数组，满10个就统一渲染
if (this.tempDataWsList.length == 10) {
this.handleList();
} else {
// 如果最后一个接收后1秒钟内不能满足10个，则直接渲染
this.wsTimeout = setTimeout(() => {
this.handleList();
}, 1000);
}
}
},
// 操作数据渲染
handleList() {
// 循环临时ws数据数组
this.tempDataWsList.forEach(temp => {
// 循环深拷贝的初始化列表数据
this.listCopy.forEach(item => {
// 循环判断列表对应ws数据id，修改深拷贝列表上的值
item.pointDetails.forEach(item1 => {
if (item1.id == temp.detailsId) {
item1.value = temp.realVal;
}
});
});
});
// 清空临时ws数据数组
this.tempDataWsList = [];
// 将修改的列表数据赋值给页面渲染
this.list = this.listCopy;
}
}