当前位置: 首页 > news >正文

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

优化思路:
把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;}
}

相关文章:

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

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

(Java)泛型总结

泛型类 public class Student<E> {private E a;public Student(E a){this.aa;}public void show(){System.out.println(a);} } 泛型方法 public <E> void show(E a){System.out.println(a);} 泛型接口 public interface Inter <T>{void show(T a); } 类…...

C++ Package继承层次,采用继承实现快递包裹的分类计价(分为空运2日达、陆运3日达)。

一、问题描述&#xff1a; Package继承层次&#xff0c;采用继承实现快递包裹的分类计价&#xff08;分为空运2日达、陆运3日达&#xff09;。自定义一个或多个快递公司&#xff0c;自定义计价方法&#xff0c;设计合适、合理的界面文本提示&#xff0c;以广东省内某市为起点&…...

中文大语言模型汇总

推荐一篇非常棒的github&#xff1a;Awesome-Chinese-LLM 另附语言模型排行榜&#xff1a;FastChat 里面总结了几乎所有目前主流的中文大语言模型。在此记录一下&#xff0c;方便以后慢慢学习。...

GEE:GEE中实现简单计算器

作者&#xff1a;CSDN _养乐多_ 本文记录了在 Google Earth Engine&#xff08;GEE&#xff09;上实现简单计算器的代码。 APP链接&#xff1a;https://949384116.users.earthengine.app/view/simplecalculator 文章目录 一、完整代码二、代码链接 一、完整代码 // 定义初始…...

概念解析 | 神经网络中的位置编码(Positional Encoding)

注1:本文系“概念解析”系列之一,致力于简洁清晰地解释、辨析复杂而专业的概念。本次辨析的概念是:Positional Encoding 神经网络中的位置编码(Positional Encoding) A Gentle Introduction to Positional Encoding in Transformer Models, Part 1 1.背景介绍 在自然语言处理任…...

【ubuntu】搭建lamp架构

一、准备工作 1、更新源 apt-get updateapt #就是一个管理包的工具&#xff0c;理解为centos中的yum update #表示让apt执行更新的操作&#xff0c;更新的内容为软件列表。#为什么要更新软件列表&#xff1f; 就时本地会隔断时间进行同步镜像站的资源包&#xff0c;但是我…...

GNU ld(链接器)的主要功能

作用&#xff1a; 链接器linker是Bintutils的一种重要工具&#xff0c;负责将编译后的目标文件(.o)合并成一个可执行文件或者共享库。 一、链接器的文件结构可以概括为以下几个关键部分&#xff1a; 输入文件 (Input Files): 输入文件通常是目标文件&#xff08;.o 文件&#…...

springboot整合FTP实现文件传输

实现ftp文件传输的步骤&#xff1a; 1.ftp绑定ip端口登录 2.切换到指定地址 3.文件下载 4.关闭ftp连接 项目中使用的jar包 <!-- ftp包--><dependency><groupId>commons-net</groupId><artifactId>commons-net</artifactId><vers…...

Spring Boot 2.x.x 升级至 Spring Boot 3.x.x

小伙伴们&#xff0c;你们好呀&#xff0c;好久不见&#xff0c;我是老寇&#xff0c;跟我一起升级Spring Boot版本 一、JDK 版本 JDK8 需要升级至 JDK17 二、Spring Boot 版本 Spring Boot 2.x.x 升级至 Spring Boot 3.x.x 三、Java Api 变更 javax 变更成 jakarta 四、…...

光电直读水表支持短时间多次抄表吗

传统的水表读数方式已经逐渐无法满足人们对于便捷、准确的需求。为此&#xff0c;光电直读水表应运而生&#xff0c;它凭借出色的读数性能和稳定的准确性&#xff0c;赢得了广大用户的一致好评。那么&#xff0c;光电直读水表支持短时间多次抄表吗&#xff1f;答案是肯定的&…...

家庭私人影院 - Windows搭建Emby媒体库服务器并远程访问 「无公网IP」

文章目录 1.前言2. Emby网站搭建2.1. Emby下载和安装2.2 Emby网页测试 3. 本地网页发布3.1 注册并安装cpolar内网穿透3.2 Cpolar云端设置3.3 Cpolar内网穿透本地设置 4.公网访问测试5.结语 1.前言 在现代五花八门的网络应用场景中&#xff0c;观看视频绝对是主力应用场景之一&…...

核心舱在轨飞行VR沉浸式互动体验满足大家宇宙探险的心愿

近日神州十七号载人飞船迎来发射&#xff0c;随着我国载人航天工程进入空间站应用与发展阶段&#xff0c;在轨航天探索和运维工作进入常态化阶段&#xff0c;然而每次出征都牵动着亿万人民的心&#xff0c;对航天航空的好奇和向往也越来越强烈。为了让普通人也能体验乘坐飞船上…...

k8s集群中namespace状态一直显示Terminating

一、问题现象 今天在做测试时&#xff0c;在一个namespace下无法启动pod&#xff0c;查看ns状态一直显示Terminating [rootnode1 ~]# kubectl get ns NAME STATUS AGE configmap Terminating 135d default Active …...

数据库高速缓存配置

数据库一般都配置数据高速缓存&#xff0c;并且可以高速缓存中按页大小分不同的缓冲池。 Oracle&#xff1a; db_cache_size是指db_block_size对应的缓冲池&#xff0c;也可以指定非db_block_size的缓冲池&#xff0c;一般也都会再配置一个32K的缓冲池&#xff0c;两个缓冲池加…...

性能优化之懒加载 - 基于观察者模式和单例模式的实现

一、引入 在前端性能优化中&#xff0c;关于图片/视频等内容的懒加载一直都是优化利器。当用户看到对应的视图模块时&#xff0c;才去请求加载对应的图像。 原理也很简单&#xff0c;通过浏览器提供的 IntersectionObserver - Web API 接口参考 | MDN (mozilla.org)&#xff0c…...

【LeetCode刷题-链表】--1290.二进制链表转整数

1290.二进制链表转整数 /*** Definition for singly-linked list.* public class ListNode {* int val;* ListNode next;* ListNode() {}* ListNode(int val) { this.val val; }* ListNode(int val, ListNode next) { this.val val; this.next next; }*…...

搭建Radius认证服务器 安当加密

搭建Radius认证服务器需要完成以下步骤&#xff1a; 安装Radius服务器软件。可以选择使用FreeRadius、Radiusd或WinRadius等开源软件&#xff0c;也可以选择使用商业软件如Cisco或安当ASP等。配置认证数据库。在Radius服务器上配置认证数据库&#xff0c;用于存储用户信息和认…...

Windows11恢复组策略编辑器功能的方法

原因分析 日常工作学习中,对 Windows 计算机上的问题进行故障排除时,有些高级用户经常使用组策略编辑器轻松修复它。通过其分层结构,您可以快速调整应用于用户或计算机的设置。如果搜索结果中缺少组策略编辑器,则可能必须使用注册表编辑器作为疑难解答工具,这是一种更复杂…...

Django实战项目-学习任务系统-查询列表分页显示

接着上期代码框架&#xff0c;6个主要功能基本实现&#xff0c;剩下的就是细节点的完善优化了。 接着优化查询列表分页显示功能&#xff0c;有很多菜单功能都有查询列表显示页面情况&#xff0c;如果数据量多&#xff0c;不分页显示的话&#xff0c;页面展示效果就不太好。 本…...

观成科技:隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

BCS 2025|百度副总裁陈洋:智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

优选算法第十二讲:队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

以光量子为例,详解量子获取方式

光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学&#xff08;silicon photonics&#xff09;的光波导&#xff08;optical waveguide&#xff09;芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中&#xff0c;光既是波又是粒子。光子本…...

JavaScript 数据类型详解

JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型&#xff08;Primitive&#xff09; 和 对象类型&#xff08;Object&#xff09; 两大类&#xff0c;共 8 种&#xff08;ES11&#xff09;&#xff1a; 一、原始类型&#xff08;7种&#xff09; 1. undefined 定…...