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

相关推荐
梅塔文·欧帕西安卡琼26 分钟前
【操作系统】Linux基本命令2
网络·linux命令
Evoxt 益沃斯2 小时前
Setup SSL/ HTTPS on NGINX on CentOS 8/ AlmaLinux 8/ RockyLinux 8
redis·网络协议·ssl
一道秘制的小菜3 小时前
Linux_17进程控制
linux·运维·服务器·开发语言·网络·c++·vim
资料库013 小时前
交换机、路由器、网关、MAC地址——从入门到实战
网络·智能路由器
不羁。。3 小时前
【网络安全工程】任务12:网络安全设备
网络·安全·web安全·网络安全·php
learning-striving4 小时前
eNSP中路由器的CON/AUX接口、GE Combo接口、Mini USB接口、USB接口、WAN侧uplink接口、FE接口、GE接口介绍
网络·智能路由器·接口·路由器·ensp
是花花呢4 小时前
华为hcia——Datacom实验指南——以太网帧和IPV4数据包格式(二)
运维·服务器·网络·网络协议·华为·华为hcia——datacom
ssr——ssss4 小时前
网络华为HCIA+HCIP网络基础
网络
苏十八4 小时前
Linux
java·linux·运维·服务器·网络·后端·sql