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日达)。
一、问题描述: Package继承层次,采用继承实现快递包裹的分类计价(分为空运2日达、陆运3日达)。自定义一个或多个快递公司,自定义计价方法,设计合适、合理的界面文本提示,以广东省内某市为起点&…...
中文大语言模型汇总
推荐一篇非常棒的github:Awesome-Chinese-LLM 另附语言模型排行榜:FastChat 里面总结了几乎所有目前主流的中文大语言模型。在此记录一下,方便以后慢慢学习。...
GEE:GEE中实现简单计算器
作者:CSDN _养乐多_ 本文记录了在 Google Earth Engine(GEE)上实现简单计算器的代码。 APP链接: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 #就是一个管理包的工具,理解为centos中的yum update #表示让apt执行更新的操作,更新的内容为软件列表。#为什么要更新软件列表? 就时本地会隔断时间进行同步镜像站的资源包,但是我…...
GNU ld(链接器)的主要功能
作用: 链接器linker是Bintutils的一种重要工具,负责将编译后的目标文件(.o)合并成一个可执行文件或者共享库。 一、链接器的文件结构可以概括为以下几个关键部分: 输入文件 (Input Files): 输入文件通常是目标文件(.o 文件&#…...
springboot整合FTP实现文件传输
实现ftp文件传输的步骤: 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
小伙伴们,你们好呀,好久不见,我是老寇,跟我一起升级Spring Boot版本 一、JDK 版本 JDK8 需要升级至 JDK17 二、Spring Boot 版本 Spring Boot 2.x.x 升级至 Spring Boot 3.x.x 三、Java Api 变更 javax 变更成 jakarta 四、…...
光电直读水表支持短时间多次抄表吗
传统的水表读数方式已经逐渐无法满足人们对于便捷、准确的需求。为此,光电直读水表应运而生,它凭借出色的读数性能和稳定的准确性,赢得了广大用户的一致好评。那么,光电直读水表支持短时间多次抄表吗?答案是肯定的&…...
家庭私人影院 - 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.前言 在现代五花八门的网络应用场景中,观看视频绝对是主力应用场景之一&…...
核心舱在轨飞行VR沉浸式互动体验满足大家宇宙探险的心愿
近日神州十七号载人飞船迎来发射,随着我国载人航天工程进入空间站应用与发展阶段,在轨航天探索和运维工作进入常态化阶段,然而每次出征都牵动着亿万人民的心,对航天航空的好奇和向往也越来越强烈。为了让普通人也能体验乘坐飞船上…...
k8s集群中namespace状态一直显示Terminating
一、问题现象 今天在做测试时,在一个namespace下无法启动pod,查看ns状态一直显示Terminating [rootnode1 ~]# kubectl get ns NAME STATUS AGE configmap Terminating 135d default Active …...
数据库高速缓存配置
数据库一般都配置数据高速缓存,并且可以高速缓存中按页大小分不同的缓冲池。 Oracle: db_cache_size是指db_block_size对应的缓冲池,也可以指定非db_block_size的缓冲池,一般也都会再配置一个32K的缓冲池,两个缓冲池加…...
性能优化之懒加载 - 基于观察者模式和单例模式的实现
一、引入 在前端性能优化中,关于图片/视频等内容的懒加载一直都是优化利器。当用户看到对应的视图模块时,才去请求加载对应的图像。 原理也很简单,通过浏览器提供的 IntersectionObserver - Web API 接口参考 | MDN (mozilla.org),…...
【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认证服务器需要完成以下步骤: 安装Radius服务器软件。可以选择使用FreeRadius、Radiusd或WinRadius等开源软件,也可以选择使用商业软件如Cisco或安当ASP等。配置认证数据库。在Radius服务器上配置认证数据库,用于存储用户信息和认…...
Windows11恢复组策略编辑器功能的方法
原因分析 日常工作学习中,对 Windows 计算机上的问题进行故障排除时,有些高级用户经常使用组策略编辑器轻松修复它。通过其分层结构,您可以快速调整应用于用户或计算机的设置。如果搜索结果中缺少组策略编辑器,则可能必须使用注册表编辑器作为疑难解答工具,这是一种更复杂…...
Django实战项目-学习任务系统-查询列表分页显示
接着上期代码框架,6个主要功能基本实现,剩下的就是细节点的完善优化了。 接着优化查询列表分页显示功能,有很多菜单功能都有查询列表显示页面情况,如果数据量多,不分页显示的话,页面展示效果就不太好。 本…...
挑战杯推荐项目
“人工智能”创意赛 - 智能艺术创作助手:借助大模型技术,开发能根据用户输入的主题、风格等要求,生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用,帮助艺术家和创意爱好者激发创意、提高创作效率。 - 个性化梦境…...
IGP(Interior Gateway Protocol,内部网关协议)
IGP(Interior Gateway Protocol,内部网关协议) 是一种用于在一个自治系统(AS)内部传递路由信息的路由协议,主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...
使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装
以下是基于 vant-ui(适配 Vue2 版本 )实现截图中照片上传预览、删除功能,并封装成可复用组件的完整代码,包含样式和逻辑实现,可直接在 Vue2 项目中使用: 1. 封装的图片上传组件 ImageUploader.vue <te…...
04-初识css
一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...
零基础设计模式——行为型模式 - 责任链模式
第四部分:行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习!行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想:使多个对象都有机会处…...
Java + Spring Boot + Mybatis 实现批量插入
在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法:使用 MyBatis 的 <foreach> 标签和批处理模式(ExecutorType.BATCH)。 方法一:使用 XML 的 <foreach> 标签ÿ…...
IP如何挑?2025年海外专线IP如何购买?
你花了时间和预算买了IP,结果IP质量不佳,项目效率低下不说,还可能带来莫名的网络问题,是不是太闹心了?尤其是在面对海外专线IP时,到底怎么才能买到适合自己的呢?所以,挑IP绝对是个技…...
搭建DNS域名解析服务器(正向解析资源文件)
正向解析资源文件 1)准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2)服务端安装软件:bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...
在 Spring Boot 项目里,MYSQL中json类型字段使用
前言: 因为程序特殊需求导致,需要mysql数据库存储json类型数据,因此记录一下使用流程 1.java实体中新增字段 private List<User> users 2.增加mybatis-plus注解 TableField(typeHandler FastjsonTypeHandler.class) private Lis…...
「全栈技术解析」推客小程序系统开发:从架构设计到裂变增长的完整解决方案
在移动互联网营销竞争白热化的当下,推客小程序系统凭借其裂变传播、精准营销等特性,成为企业抢占市场的利器。本文将深度解析推客小程序系统开发的核心技术与实现路径,助力开发者打造具有市场竞争力的营销工具。 一、系统核心功能架构&…...
