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

相关推荐
川石课堂软件测试3 分钟前
MySQL数据库之DBA命令
数据库·网络协议·mysql·http·单元测试·prometheus·dba
半梦半醒*2 小时前
zabbix安装
linux·运维·前端·网络·zabbix
南尘NCA86662 小时前
企业微信防封防投诉拦截系统:从痛点解决到技术实现
java·网络·企业微信
程序猿费益洲3 小时前
Docker 网络详解:(三)四大网络模式
网络·docker·容器
2501_915106324 小时前
Comodo HTTPS 在工程中的部署与排查实战(证书链、兼容性与真机抓包策略)
网络协议·http·ios·小程序·https·uni-app·iphone
Mr_Meng_De4 小时前
网络安全认证培训机构的痛点
网络
AORO20255 小时前
2025全新三防平板科普:5G-A+卫星通信+国产化
网络·5g·智能手机·电脑·制造·信息与通信
深圳南柯电子5 小时前
车载通信设备EMC整改:高频问题与AI辅助诊断方案|深圳南柯电子
网络·人工智能·互联网·实验室·emc
morning_sir_jking7 小时前
深入解析 kube-proxy:Kubernetes 服务发现的网络基石
网络·kubernetes·服务发现
问道飞鱼7 小时前
【Linux知识】Linux磁盘开机挂载
linux·运维·网络·磁盘·自动挂载