当前位置: 首页 > 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;页面展示效果就不太好。 本…...

如何彻底解决Cursor API限制问题:从免费到Pro的完整指南

如何彻底解决Cursor API限制问题&#xff1a;从免费到Pro的完整指南 【免费下载链接】cursor-free-vip [Support 0.45]&#xff08;Multi Language 多语言&#xff09;自动注册 Cursor Ai &#xff0c;自动重置机器ID &#xff0c; 免费升级使用Pro 功能: Youve reached your t…...

如何快速掌握Fast-F1:Python赛车数据分析实战指南

如何快速掌握Fast-F1&#xff1a;Python赛车数据分析实战指南 【免费下载链接】Fast-F1 FastF1 is a python package for accessing and analyzing Formula 1 results, schedules, timing data and telemetry 项目地址: https://gitcode.com/GitHub_Trending/fa/Fast-F1 …...

掌握Calibre电子书管理:从格式转换到高级编辑的完整指南

掌握Calibre电子书管理&#xff1a;从格式转换到高级编辑的完整指南 【免费下载链接】calibre The official source code repository for the calibre ebook manager 项目地址: https://gitcode.com/GitHub_Trending/ca/calibre Calibre是一款功能强大的开源电子书管理器…...

Claude Code 命令行参数实践指南

前言 很多人第一次打开 Claude Code&#xff0c;只会输入 claude&#xff0c;然后开始聊天。这当然可以&#xff0c;但就像开车只会踩油门一样——你根本没用上方向盘和变速箱。 命令行参数&#xff08;CLI Flags&#xff09;就是那些被忽视的"方向盘"。掌握它们&a…...

mPLUG-Owl3-2B在教育、工作、生活中的10个实用场景分享

mPLUG-Owl3-2B在教育、工作、生活中的10个实用场景分享 1. 引言&#xff1a;多模态AI如何改变我们的日常 想象一下&#xff0c;当你随手拍下一张植物照片&#xff0c;AI不仅能告诉你它的学名&#xff0c;还能详细解释它的生长习性和养护要点&#xff1b;当你面对一份复杂的工…...

W5500 TCP客户端实战:从寄存器配置到网络调试助手,手把手打通第一个连接

W5500 TCP客户端开发实战&#xff1a;从硬件连接到数据交互的全流程解析 第一次接触W5500芯片时&#xff0c;我盯着数据手册里密密麻麻的寄存器描述发呆了半小时——网关地址、子网掩码、Socket模式...这些概念对嵌入式开发者来说既熟悉又陌生。本文将带你用最直观的方式理解W…...

nli-distilroberta-base轻量化效果实测:在嵌入式设备上的推理性能与精度

nli-distilroberta-base轻量化效果实测&#xff1a;在嵌入式设备上的推理性能与精度 1. 开篇&#xff1a;当大模型遇上小设备 在树莓派上跑BERT&#xff1f;半年前这还是个笑话。但当我第一次在Jetson Nano上成功运行量化后的nli-distilroberta-base模型时&#xff0c;这个4核…...

XUnity.AutoTranslator游戏翻译解决方案:从入门到精通的实战指南

XUnity.AutoTranslator游戏翻译解决方案&#xff1a;从入门到精通的实战指南 【免费下载链接】XUnity.AutoTranslator 项目地址: https://gitcode.com/gh_mirrors/xu/XUnity.AutoTranslator 你是否曾因语言障碍错失优秀的Unity游戏体验&#xff1f;面对满屏外文界面感到…...

Scarab:基于Avalonia的跨平台空洞骑士模组管理器架构解析

Scarab&#xff1a;基于Avalonia的跨平台空洞骑士模组管理器架构解析 【免费下载链接】Scarab An installer for Hollow Knight mods written in Avalonia. 项目地址: https://gitcode.com/gh_mirrors/sc/Scarab Scarab是一款专为《空洞骑士》游戏设计的跨平台模组管理器…...

YOLOv12镜像实战:工业质检场景下的高精度缺陷识别方案

YOLOv12镜像实战&#xff1a;工业质检场景下的高精度缺陷识别方案 1. 工业质检的挑战与YOLOv12的机遇 在制造业数字化转型浪潮中&#xff0c;工业质检一直是自动化程度较低的环节。传统人工检测面临三大痛点&#xff1a; 效率瓶颈&#xff1a;熟练质检员每分钟最多检测20-30…...