webSocket推送太快导致前端渲染卡顿问题优化

news/2024/11/25 23:17:39/

优化思路:
把webSocket接收到的数据用一个数组存起来,达到一定长度再统一渲染,可根据推送数据的速度适当调解数组长度限制,如果一段时间内改数组长度打不要渲染条件,就用定时器之间渲染

data() {return {tempDataWsList: [], // 存放临时ws数据数组list: [], // 页面上的列表listCopy: [], // 深拷贝的初始化列表数据,用于统一渲染}
}
methods: {...// websocket接收数据的方法onMessage(data) {if (data.data) {// 将Json字符串转译const dataWs = JSON.parse(data.data);// 将转译后的数据推入临时ws数据数组中this.tempDataWsList.push(dataWs);// 有ws数据就关闭定时器clearTimeout(this.wsTimeout);// 做缓存渲染,将ws接收到的数据放到数组,满10个就统一渲染if (this.tempDataWsList.length == 10) {this.handleList();} else {// 如果最后一个接收后1秒钟内不能满足10个,则直接渲染this.wsTimeout = setTimeout(() => {this.handleList();}, 1000);}}},// 操作数据渲染handleList() {// 循环临时ws数据数组this.tempDataWsList.forEach(temp => {// 循环深拷贝的初始化列表数据this.listCopy.forEach(item => {// 循环判断列表对应ws数据id,修改深拷贝列表上的值item.pointDetails.forEach(item1 => {if (item1.id == temp.detailsId) {item1.value = temp.realVal;}});});});// 清空临时ws数据数组this.tempDataWsList = [];// 将修改的列表数据赋值给页面渲染this.list = this.listCopy;}
}

http://www.ppmy.cn/news/1192509.html

相关文章

【docker使用Jar自定义镜像:基于windows】

在一个空文件夹中创建Dockerfile 将jar包复制到该路径下 在Dockerfile中添加以下内容 # 指定基础镜像 FROM java:8-alpine# 和java项目的包 COPY ./study_dockerfile-1.0.0.jar /tmp/app.jar# 暴露端口 EXPOSE 8081# 入口,java项目的启动命令 ENTRYPOINT java -jar…

linux安装apache并配置userid站点

目录 一、linux安装apache的方式 1、安装wget 2、下载CentOS 7的repo文件 3、更新镜像源 二、安装apache 1.通过命令直接安装apache(linux的软件包为httpd) 2.启动httpd服务 3.访问一下 三、apache配置文件 1.主配置文件 2.修改根目录 3.修改下端口 4.apache的工作…

百度 | 文心一言也开始收费了

好久没用文心一言了 之前一直用ChatGPT的 今天打开文心一言一看,好家伙 出了文心大模型4.0,想体验一下来着 可惜是收费的 看下价格,没买 50块钱一个月,对比ChatGPT4来说,确实不算贵 毕竟gpt4一个月20美刀 ,…

社交媒体欺诈乱象 | 每15人就有1人遭遇过网络欺诈!

目录 社交媒体的欺诈现象 欧盟要求科技公司加强虚假信息处理 借助技术识别虚假社交账号 据英国劳埃德银行(TSB)5月份发布的一份报告披露,社交媒体平台上的金融欺诈正在以令人担忧的速度增加,消费者应对Facebook、Instagram和Wh…

Python 3.7 Error loading MySQLdb module. 安装mysqlClient报错的最便捷方法

Python 3.7 安装mysqlClient报错的最便捷方法 1.问题背景 在构建新的基于Pyhton3.7的Django Server时,引入mysql后,服务频繁报出 Error loading MySQLdb module. Did you install mysqlcliet,导致服务请求失败。 2.问题描述 服务请求报错 File "…

云安全-云原生技术架构(Docker逃逸技术-特权与危险挂载)

0x00 云原生技术-docker docker容器和虚拟机的对比:前者是将运行环境打包,封装一个环境。后者是将整个系统打包,封装一个系统。在操作使用上来说各有利弊。 0x01 docker容器的三种逃逸类型 特权模式启动(不安全的启动方式&…

【案例】3D地球(vue+three.js)

需要下载插件 <template><div class"demo"><div id"container" ref"content"></div></div> </template> <script> import * as THREE from three; // import mapJSON from ../map.json; import { Or…

百度竞价排名推广对比自然排名哪一个更具优势-华媒舍

在搜索引擎结论网页页面&#xff08;SERP&#xff09;中&#xff0c;我们经常会看到一些网站链接及其广告栏。这种连接一般分为两种类型&#xff1a;百度竞价推广排名推广与自然排名。究竟哪个更有优势&#xff1f;本文将对这几种排名形式进行科谱详细介绍。 什么叫百度竞价推广…