当前位置:首页 » 《我的小黑屋》 » 正文

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

0 人参与  2024年04月01日 15:55  分类 : 《我的小黑屋》  评论

点击全文阅读


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

点击全文阅读


本文链接:http://m.zhangshiyu.com/post/89048.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 好看的顾墨琛沈冉沈心:+后续+结局_顾墨琛沈冉沈心:+后续+结局
  • [女儿死后,老婆只让我吃狗食]情感冲突精选段落_「温颜井余陆同舟」免费试读
  • 爸爸和哥哥毁掉我嗓子后,我杀疯了节选试读_[妹妹弟弟高昱宸]精彩章节免费试读
  • 偷砸千万陪男友创业,他却转头表白初恋?最新后续章节在线阅读_「贺楠姜淼白月光」小说***章节抢先看
  • 微风轻拂又见你:+结局+番外(林书意陆沉)_微风轻拂又见你:+结局+番外(林书意陆沉)列表_笔趣阁(林书意陆沉)
  • 微风轻拂又见你:全书+后续+结局免费_(林书意陆沉)微风轻拂又见你:全书+后续+结局林书意陆沉列表_笔趣阁(林书意陆沉)
  • 景清可入淮:结局+番外(姜以清萧景淮)_景清可入淮:结局+番外列表_笔趣阁(姜以清萧景淮)
  • 全文大寒冬去春可期(曲晚乔)列表_全文大寒冬去春可期
  • 「爸爸和哥哥毁掉我嗓子后,我杀疯了」命运转折章节速览_[妹妹弟弟高昱宸]全章节免费阅读
  • [得知我是假千金,男友逼我被车碾压]免费_「任曼曼贺裕曼曼」完结
  • 「绑定吃瓜系统,满朝文武吓疯了」剧情悬念章节分段解锁_楚临情感冲突名场面试读章
  • 老公傍上富婆要跟我离婚,却不知富婆她爹是我家管家:结局+番外(老公傍上富婆要跟我离婚,却不知富婆她爹是我家管家:结局+番外)完结_(林立洋)列表_笔趣阁(老公傍上富婆要跟我离婚,却不知富婆她爹是我家管家:结局+番外)

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1