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

本文主要是介绍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;}
}

这篇关于webSocket推送太快导致前端渲染卡顿问题优化的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---