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

相关推荐
蜡笔小新星11 分钟前
Python Kivy库学习路线
开发语言·网络·经验分享·python·学习
小白爱电脑2 小时前
WIFI网速不够是不是光猫的“路由模式”和“桥接模式”配置错了?
网络·智能路由器·桥接模式
qxqxa3 小时前
cfg80211是怎么配置无线设备的AP的?
网络·驱动开发
秋夫人4 小时前
http cache-control
网络·网络协议·http
不灭锦鲤6 小时前
ssrf学习(ctfhub靶场)
网络·学习·安全
weixin_548444266 小时前
2024年最新版本神马TV8.5影视APP源码 293TV影视点播系统源码搭建教程 神马TV8.2加强版反编译教程 保姆级小白可搭建 完整版本视频教程
网络
网络研究院8 小时前
如何安全地大规模部署 GenAI 应用程序
网络·人工智能·安全·ai·部署·观点
limengshi1383928 小时前
通信工程学习:什么是RIP路由信息协议
网络·网络协议·学习·智能路由器·信息与通信
GodK7779 小时前
HTTPS 的加密流程
网络协议·http·https
limengshi13839212 小时前
通信工程学习:什么是TFTP简单文件传输协议
网络·网络协议·学习·信息与通信