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

相关推荐
ylscode6 小时前
PureLogs 信息窃取恶意软件惊现高危变种:借道 MsBuild.exe 进程空心化实施无痕攻击
网络·安全·安全威胁分析
IPHWT 零软网络6 小时前
MX60E-A信创级智能语音网关技术实现与架构分析
网络·网络安全·国产自研·技术实现·智能语音网关·政企通信·信创技术
IT大白鼠7 小时前
RSTP协议原理与配置详解:快速生成树技术的深度解析
网络·网络协议
C+++Python8 小时前
BIO、NIO、AIO 区别
网络·nio
VOOHU-沃虎9 小时前
沃虎——网络变压器与RJ45集成连接器选型实战:从百兆到10G、从非PoE到4PPoE
网络
2301_773643629 小时前
华为云存储实验
网络·mysql·华为云
ylscode10 小时前
Windows 内核惊现高危提权漏洞 CVE-2026-40369:沙箱隔离失效,SYSTEM 权限唾手可得
网络·安全·安全威胁分析
jieyu111910 小时前
Wireshark使用指南【超全面】
网络·wireshark
weixin_5206498710 小时前
通信【报文】
网络
志栋智能10 小时前
小步快跑:从单一场景开启超自动化巡检之旅
运维·网络·人工智能·自动化