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

最新推荐文章于 2024-09-10 09:08:28 发布

老电影故事

最新推荐文章于 2024-09-10 09:08:28 发布

阅读量3k

点赞数 2

分类专栏： JavaScript 文章标签： websocket 前端网络协议

本文链接：https://blog.csdn.net/weixin_44582045/article/details/134188564

版权

JavaScript 专栏收录该内容

79 篇文章 10 订阅

订阅专栏

文章介绍了如何通过WebSocket接收数据时，使用数组缓存并控制渲染频率，以提高性能。当数据达到一定数量或在规定时间内未达阈值，则通过定时器进行渲染更新。

摘要由CSDN通过智能技术生成

优化思路：
把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;
  }
}