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

相关推荐
寻星探路4 小时前
【深度长文】万字攻克网络原理:从 HTTP 报文解构到 HTTPS 终极加密逻辑
java·开发语言·网络·python·http·ai·https
王达舒19944 小时前
HTTP vs HTTPS: 终极解析,保护你的数据究竟有多重要?
网络协议·http·https
朱皮皮呀4 小时前
HTTPS的工作过程
网络协议·http·https
Binary-Jeff4 小时前
一文读懂 HTTPS 协议及其工作流程
网络协议·web安全·http·https
盟接之桥8 小时前
盟接之桥说制造:引流品 × 利润品,全球电商平台高效产品组合策略(供讨论)
大数据·linux·服务器·网络·人工智能·制造
会员源码网8 小时前
理财源码开发:单语言深耕还是多语言融合?看完这篇不踩坑
网络·个人开发
米羊1219 小时前
已有安全措施确认(上)
大数据·网络
ManThink Technology10 小时前
如何使用EBHelper 简化EdgeBus的代码编写?
java·前端·网络
珠海西格电力科技10 小时前
微电网能量平衡理论的实现条件在不同场景下有哪些差异?
运维·服务器·网络·人工智能·云计算·智慧城市
默默前行的虫虫11 小时前
解决EMQX WebSocket连接不稳定及优化WS配置提升稳定性?
websocket