关于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)

相关推荐
神经毒素42 分钟前
WEB安全--RCE--webshell bypass
网络·安全·web安全
猿周LV42 分钟前
网络原理 - 应用层, 传输层(UDP 和 TCP) 进阶, 网络层, 数据链路层 [Java EE]
服务器·网络·网络协议·tcp/ip·udp·java-ee
Zz_waiting.1 小时前
网络原理 - 9
linux·服务器·网络·网络协议·tcp/ip
娃娃略1 小时前
【AI模型学习】双流网络——更强大的网络设计
网络·人工智能·pytorch·python·神经网络·学习
你又食言了哦1 小时前
linux下使用wireshark捕捉snmp报文
linux·网络·wireshark
_揽2 小时前
前端开发本地配置 HTTPS 全面详细教程
网络协议·http·https
S&Z34632 小时前
[FPGA Video IP] Video Processing Subsystem
网络协议·tcp/ip·fpga开发·video
古月方源aaaaa3 小时前
ospf综合作业
网络·智能路由器
Ll Lin4 小时前
OSPF中DR/BDR的选举
网络·智能路由器
大阔4 小时前
路由表是什么
网络协议