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

相关推荐
2501_9216494910 小时前
如何获取美股实时行情:Python 量化交易指南
开发语言·后端·python·websocket·金融
老蒋新思维11 小时前
创客匠人视角:智能体重构创始人 IP,知识变现从 “内容售卖” 到 “能力复制” 的革命
大数据·网络·人工智能·tcp/ip·创始人ip·创客匠人·知识变现
老蒋新思维13 小时前
创客匠人:认知即资产 ——AI 时代创始人 IP 知识变现的底层逻辑
网络·人工智能·网络协议·tcp/ip·重构·创始人ip·创客匠人
白驹过隙^^14 小时前
OB-USP-AGENT安装使用方法
数据库·经验分享·网络协议·tcp/ip·github·ssl
白帽子黑客罗哥14 小时前
渗透测试技术:从入门到实战的完整指南
网络·安全·web安全·渗透测试·漏洞挖掘·网络安全培训
北邮刘老师15 小时前
【智能体互联协议解析】ACPs/AIP为什么还在用“落后”的“中心化”架构?
网络·人工智能·架构·大模型·智能体·智能体互联网
winfield82115 小时前
MCP 协议详解
开发语言·网络·qt
sdszoe492215 小时前
IP地址规划与VLSM技术
网络·网络协议·tcp/ip·vlsm·ip地址规划
m0_5695310115 小时前
《K8s 网络入门到进阶:Service 与 Ingress 原理、部署方案及核心区别对比》
网络·容器·kubernetes
广东大榕树信息科技有限公司15 小时前
当运维管理面临挑战时,如何借助动环监控系统提升响应能力?
运维·网络·物联网·国产动环监控系统·动环监控系统