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

相关推荐
裕晟资质规划13 小时前
三类资质变更报告时限差在哪?军工 15 日、集成印制 10 日
大数据·服务器·网络
轻舟技术A13 小时前
Provider 不属于 Agent 核心:rpi 的分层理由与收益
服务器·网络
Escalating_xu14 小时前
【Linux 网络编程】TCP Socket 编程(上):从 listen、accept 到完整回显通信
linux·网络·tcp/ip
NetX行者14 小时前
Python 工程化入门:从脚本到规范的 Python 项目结构
网络·python
Yang961114 小时前
从相位噪声到实时带宽:HD-063B支撑的频谱实验项目
网络
happyprince14 小时前
01-整体观-DeepSeek-V4.1-Flash全貌解读
网络
是真的小外套14 小时前
2023年软考中级信息安全工程师|选择题考点+5道案例分析真题解析(含答案)
java·服务器·网络
一条泥憨鱼15 小时前
【计算机网络】| 从 MAC 到 NAT 的跨网段通信全链路
服务器·网络·学习·计算机网络·macos
Moyu_Friday15 小时前
网络安全基础-计算机网络应用与协议
网络协议·计算机网络
workflower15 小时前
超算中心聚焦高性能计算场景(HPC)
大数据·网络·人工智能·机器人·云计算·汽车