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

相关推荐
涔溪1 小时前
HTTP TCP三次握手深入解析
网络·tcp/ip·http
憨子周1 小时前
2M的带宽怎么怎么设置tcp滑动窗口以及连接池
java·网络·网络协议·tcp/ip
三菱-Liu2 小时前
三菱MR-J4-B伺服连接器和信号排列
网络·驱动开发·硬件工程·制造·mr
WeeJot嵌入式2 小时前
网络安全:挑战、策略与未来趋势
网络
a1denzzz5 小时前
Linux系统的网络设置
linux·服务器·网络
黑客K-ing6 小时前
网络安全名词解释
开发语言·网络·安全·网络安全·php
ZachOn1y7 小时前
计算机网络:运输层 —— 运输层端口号
网络协议·tcp/ip·计算机网络·udp·tcp·端口号
Z pz7 小时前
网络编程——Python简单TCP通信功能代码实践
网络·python·tcp/ip
QQ_7781329747 小时前
信息收集、漏洞扫描、漏洞利用、权限提升、数据泄露
网络·计算机网络
运维小文7 小时前
K8资源之endpoint资源&EP资源
linux·网络·k8s·运维开发