关于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 天前
开发者网络概念全扫盲:一篇搞定
后端·网络协议
刘马想放假2 天前
Modbus 全栈技术解析:TCP、RTU、ASCII、RTU over TCP
数据结构·网络协议
王二端茶倒水3 天前
一套可落地的无线运营方案,不能只管 AP,还要管用户、计费和运维
网络协议
162723816083 天前
EtherCAT 分布式时钟(DC)原理与配置实战:把多轴真正"对齐到同一时刻"
网络协议
王二端茶倒水4 天前
宽带无线项目,怎么从一次性交付变成长期运营收入?
网络协议
用户2530171996275 天前
第6篇:从技术到产品 — Ghost Proxifier 的设计哲学
网络协议
用户2530171996275 天前
第3篇:注入的艺术 — Ghost Proxifier 核心架构拆解
网络协议
王二端茶倒水6 天前
商业 WiFi 不是免费上网,而是门店数字化的入口
网络协议
网络研究院11 天前
2026年网络安全
网络·安全·法律·法规·趋势·发展