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;  }}

阅读本书更多章节>>>>

本文链接：https://www.kjpai.cn/gushi/2024-04-20/160515.html，文章来源：网络cs，作者：璐璐，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！