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

相关推荐
Dawn-bit5 分钟前
Linux网络进阶:TCP三次握手和四次挥手与TCP连接状态
linux·服务器·网络·tcp/ip·云计算·智能路由器
xier_ran1 小时前
【infra之路】GPU 存储层次总结:L1 / L2 / HBM
java·网络·数据库
小网洞2 小时前
免费WPA无线握手包在线分析跑包网站
网络·网络安全·密码学·wps
@insist1233 小时前
系统集成项目管理工程师-信息和文档管理
网络·数据库·软考·系统集成项目管理工程师·软考中项·软件水平考试
极客互动API3 小时前
企业微信 iPad 协议服务搭建与 AI 回调实战
网络·汇编·人工智能·微信·企业微信·ipad
QH139292318804 小时前
Keysight N5183B N5183B 微波模拟信号发生器
网络·单片机·嵌入式硬件·集成测试·信息与通信
LabVIEW开发4 小时前
基于原始套接字实现LabVIEW网络Ping检测的编程方法
网络·labview·labview知识·labview功能·labview程序
东莞和裕包装4 小时前
如何管控广州定制纸箱生产中的啤切精度与印刷色差质量问题
大数据·运维·网络·人工智能
Zguigo5 小时前
lesson19-23计算机网络数据链路层完全指南:从帧封装到滑动窗口协议
网络·计算机网络
Kina_C5 小时前
从零搭建Kubernetes集群:Harbor私有仓库 + K8s v1.35 + Flannel网络插件完整部署指南
网络·容器·kubernetes