关于websocket数据过多造成浏览器卡顿问题

问题:

websocket发送大量数据并不会造成卡顿 , 如果不停的 渲染页面 , 那可能会造成浏览器卡顿

解决:

给页面设置展示数据行数,限制页面渲染内容

如果推送数据大于展示行数(比如100行),截取最新的100条数据展示

如果推送数据小于展示行数,那么当前的数据渲染即可

复制代码
 onmessage(event) {
      this.datalog("MESSAGE: " + event.data);
    },
    datalog(msg) {
      var log = document.getElementById("log");
      log.scrollTop = log.scrollHeight;
      this.messageArr.push(msg)
      if(this.messageArr.length > this.Form.showline){
      this.messageArr =  this.messageArr.slice(Number(-this.Form.showline))
      }
     
    },

 <ul id="log" :style="{'height': clientHeight+'px'}">
            <li v-for="(item,index) in messageArr" :key="index + new Date()">{{item}}</li>
          </ul>

btw. 数据从末尾截取 arr.slice(-100)

相关推荐
数据智能老司机2 小时前
如何对 AI Web 智能体进行身份认证
websocket·agent
Sheffield3 天前
Docker的跨主机服务与其对应的优缺点
linux·网络协议·docker
YuMiao7 天前
gstatic连接问题导致Google Gemini / Studio页面乱码或图标缺失问题
服务器·网络协议
Jony_10 天前
高可用移动网络连接
网络协议
chilix10 天前
Linux 跨网段路由转发配置
网络协议
DianSan_ERP12 天前
电商API接口全链路监控:构建坚不可摧的线上运维防线
大数据·运维·网络·人工智能·git·servlet
呉師傅12 天前
火狐浏览器报错配置文件缺失如何解决#操作技巧#
运维·网络·windows·电脑
gihigo199812 天前
基于TCP协议实现视频采集与通信
网络协议·tcp/ip·音视频
2501_9462055212 天前
晶圆机器人双臂怎么选型?适配2-12寸晶圆的末端效应器有哪些?
服务器·网络·机器人
linux kernel12 天前
第七部分:高级IO
服务器·网络