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

相关推荐
qq_4112624230 分钟前
为什么会“偶发 539/500 与建连失败”
服务器·c语言·网络·智能路由器
m0_571372821 小时前
关于linux软件编程9——网络编程1
linux·服务器·网络
奇树谦1 小时前
WindowsAPI|每天了解几个winAPI接口之网络配置相关文档Iphlpapi.h详细分析八
网络·windwosapi
源代码•宸3 小时前
网络流量分析——基础知识(二)(Tcpdump 基础知识)
运维·开发语言·网络·c++·经验分享·tcpdump
出海探索的Cindy11 小时前
什么是IP隔离?一文讲清跨境电商/海外社媒的IP隔离逻辑
网络·网络协议·tcp/ip
我再也不搞抽象了12 小时前
网络与信息安全有哪些岗位:(6)安全开发工程师
网络·安全
四岁爱上了她13 小时前
vue3+socketio一个即时通讯的小demo
vue.js·websocket
wanhengidc13 小时前
造成云手机闪退的原因有哪些?
服务器·网络·安全·智能手机·媒体
聚铭网络15 小时前
聚铭安全管家平台2.0实战解码 | 安服篇(四):重构威胁追溯体系
网络·安全·重构
郭二哈15 小时前
git的使用
大数据·网络·git·elasticsearch