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

相关推荐
程序员洲洲16 分钟前
使用青果代理IP爬取豆瓣TOP250电影数据
网络·网络协议·tcp/ip
Huazzi.27 分钟前
免费好用的静态网页托管平台全面对比介绍
前端·网络·github·web
张小小大智慧28 分钟前
HTTP 协议应用场景
网络·网络协议·http
安晴晚风30 分钟前
HTTP有哪些风险?是怎么解决的?
网络·网络协议·http
小黄编程快乐屋32 分钟前
深入理解 HTTP 请求头与请求体
网络·网络协议·http
刀客12335 分钟前
http/https
网络协议·http·https
小宇python1 小时前
动态调试对安全研究有什么帮助?
网络·安全·web安全
Hacker_xingchen1 小时前
网络安全之内网安全
网络·安全·web安全
Ray55052 小时前
bridge-multicast-igmpsnooping
linux·服务器·网络
中国云报2 小时前
金融数据中心容灾“大咖说” | Commvault的“网络弹性”之道
网络·金融