关于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 分钟前
计算机网络相关 讲一下rpc与传统http的区别
java·开发语言·网络·jvm·c#
xwz小王子5 分钟前
Nature Electronics 新加坡国立大学研发了基于柔性拓扑结构服装的体感传感器网络
网络·体感传感器
独行soc27 分钟前
2026年渗透测试面试题总结-5(题目+回答)
android·网络·python·安全·web安全·渗透测试
希赛网27 分钟前
网工面试:常问技术问题汇总(3)
服务器·前端·网络·网络工程师·ospf·网工面试·技术面
进阶小白猿34 分钟前
Java技术八股学习Day23
java·网络·学习
华硕之声39 分钟前
试着像猫一样生活
网络·数据·华硕
上海云盾安全满满42 分钟前
入侵防御系统与入侵检测系统的核心区别
网络·安全·web安全
中议视控1 小时前
网络中央控制系统主机与音频综合管理平台的对接
网络·音视频
网宿安全演武实验室1 小时前
Linux Rootkit 手法解析(上):用户态的“隐身术”与检测思路
linux·网络·安全·apt·攻防对抗
徐同保1 小时前
OnlyOffice HTTPS 代理配置总结
redis·网络协议·https