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个主要功能基本实现,剩下的就是细节点的完善优化了。 接着优化查询列表分页显示功能,有很多菜单功能都有查询列表显示页面情况,如果数据量多,不分页显示的话,页面展示效果就不太好。 本…...
Bongo Cat功能选择指南:从需求定位到场景化配置
Bongo Cat功能选择指南:从需求定位到场景化配置 【免费下载链接】BongoCat 让呆萌可爱的 Bongo Cat 陪伴你的键盘敲击与鼠标操作,每一次输入都充满趣味与活力! 项目地址: https://gitcode.com/gh_mirrors/bong/BongoCat Bongo Cat是一…...
PP-DocLayoutV3入门必看:从零部署到JSON结构化输出完整流程
PP-DocLayoutV3入门必看:从零部署到JSON结构化输出完整流程 1. 开篇:认识文档布局分析利器 你是否曾经遇到过这样的困扰:面对扫描的文档图片,想要提取其中的文字和结构信息,却不知道从何下手?或者需要处理…...
Windows 11终极优化指南:用Win11Debloat免费提升51%系统性能
Windows 11终极优化指南:用Win11Debloat免费提升51%系统性能 【免费下载链接】Win11Debloat 一个简单的PowerShell脚本,用于从Windows中移除预装的无用软件,禁用遥测,从Windows搜索中移除Bing,以及执行各种其他更改以简…...
模型安全实践:实时手机检测-通用输入图像异常检测(模糊/过曝/裁剪)
模型安全实践:实时手机检测-通用输入图像异常检测(模糊/过曝/裁剪) 1. 项目简介与核心价值 在日常的手机检测应用中,我们经常会遇到各种图像质量问题:图片模糊看不清手机细节、光线过曝导致手机轮廓丢失、或者图片被…...
Blender3mfFormat插件全攻略:从基础到进阶的3MF文件处理指南
Blender3mfFormat插件全攻略:从基础到进阶的3MF文件处理指南 【免费下载链接】Blender3mfFormat Blender add-on to import/export 3MF files 项目地址: https://gitcode.com/gh_mirrors/bl/Blender3mfFormat 一、基础认知:3MF格式与插件价值解析…...
互联网舆情分析系统:基于Nanbeige 4.1-3B的情感与主题挖掘
互联网舆情分析系统:基于Nanbeige 4.1-3B的情感与主题挖掘 最近几年,大家有没有感觉网上的声音越来越复杂?一个热点出来,瞬间就是成千上万条评论,有支持的,有反对的,有理性分析的,也…...
【调优】OpenClaw从零开始群聊安全配置
未来已来,只需一句指令,养龙虾专栏导航,持续更新ing… 想象一下,你正在指挥一场精密的交响乐,每一个乐器(群组)都需要在正确的时间发出声音,既不能杂乱无章,也不能产生噪音。 对群组最核心的思考是:如何在“智能”与“安全”之间找到完美的平衡点? 答案就是“分层治…...
Phi-3-Mini-128K技术文档翻译与润色对比:中英互译质量评估
Phi-3-Mini-128K技术文档翻译与润色对比:中英互译质量评估 最近在折腾一些开源项目,免不了要和英文技术文档打交道。对于咱们中文开发者来说,直接阅读原版文档虽然最准确,但有时候效率确实不高。机器翻译就成了一个绕不开的工具。…...
从“偏科生”GPT-3到“全能选手”:聊聊MMLU基准如何推动大模型进化
从“偏科生”到“全能选手”:MMLU基准如何重塑大模型进化路径 当GPT-3在2020年以1750亿参数震惊世界时,人们很快发现这个"天才"存在明显的知识盲区——它在某些专业领域的表现堪比专家,却在另一些基础学科上失误频频。这种"偏…...
若依框架多数据源实战:如何用@DataSource注解轻松切换MySQL主从库
若依框架多数据源实战:用DataSource注解实现MySQL主从库智能切换 当系统流量逐渐攀升,数据库的读写压力开始显现时,很多开发者都会面临一个关键决策:如何在保证数据一致性的前提下,有效分散数据库负载?若依…...
