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

相关推荐
jun_bai1 小时前
python写的文件备份网盘程序
运维·服务器·网络
爱吃牛肉的大老虎1 小时前
网络传输架构之gRPC讲解
网络·架构
Warren981 小时前
Python自动化测试全栈面试
服务器·网络·数据库·mysql·ubuntu·面试·职场和发展
云飞云共享云桌面2 小时前
无需配置传统电脑——智能装备工厂10个SolidWorks共享一台工作站
运维·服务器·前端·网络·算法·电脑
骆驼10243 小时前
手机热点和无线路由器在 IPv6 工作模式上的区别
网络·ipv6
jenchoi4134 小时前
【2025-11-23】软件供应链安全日报:最新漏洞预警与投毒预警情报汇总
网络·数据库·安全·web安全·网络安全
火星数据-Tina5 小时前
低成本搭建体育数据中台:一套 API 如何同时支撑比分网与 App?
java·前端·websocket
独行soc5 小时前
2025年渗透测试面试题总结-258(题目+回答)
网络·python·安全·web安全·渗透测试·安全狮
AI绘画小336 小时前
网络安全(黑客技术)—2025自学手册
网络·安全·web安全·网络安全·渗透测试
s09071367 小时前
ZYNQ DMA to UDP 数据传输系统设计文档
网络协议·fpga开发·udp