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

相关推荐
123过去9 分钟前
rcracki_mt使用教程
linux·网络·测试工具
钛态1 小时前
Flutter for OpenHarmony:shelf_web_socket 快速构建 WebSocket 服务端,实现端到端实时通信(WebSocket 服务器) 深度解析与鸿蒙适配指南
服务器·前端·websocket·flutter·华为·性能优化·harmonyos
星辰徐哥1 小时前
C++网络编程:TCP服务器与客户端的实现
网络·c++·tcp/ip
初九之潜龙勿用1 小时前
C# 解决“因为算法不同,客户端和服务器无法通信”的问题
服务器·开发语言·网络协议·网络安全·c#
星辰徐哥1 小时前
C语言网络编程:TCP/IP协议栈、套接字、服务器/客户端通信深度解析
c语言·网络·tcp/ip
算法-大模型备案 多米2 小时前
大模型备案实操指南:材料、流程与避坑要点
大数据·网络·人工智能·算法·文心一言
可乐鸡翅好好吃2 小时前
Keil更改RAM地址
网络·单片机·嵌入式硬件
运维行者_2 小时前
通过 OpManager 集成 Firewall Analyzer 插件,释放统一网络管理与安全的强大能力
大数据·运维·服务器·网络·数据库·安全
上海云盾-小余2 小时前
什么是流量清洗?DDoS 防御的核心原理与实战应用
网络·安全·web安全·ddos
muls13 小时前
java面试宝典
java·linux·服务器·网络·算法·操作系统