解决1万条数据前端渲染不卡的问题
万级数据前端渲染优化
- 解决思路
- requestAnimationFrame
- 完整代码
解决思路
将数据分组，通过定时器或requestAnimationFrame两种方式分组渲染到Dom上
requestAnimationFrame
渲染数据-动画requestAnimationFram方法
使用requestAnimationFrame可以将动画的每一帧绘制操作封装为一个回调函数，
并将这个回调函数传递给requestAnimationFrame函数。
当浏览器准备进行下一帧绘制时，会自动调用这个回调函数，从而实现了动画的循环。
// 定义一个渲染函数
const useTwoArr=(page)=>{if(page>twoArr.length-1) return// 用动画讲求来优化requestAnimationFrame(()=>{// 取一项,拼接一项this.tableData=[...this.tableData,...twoArr[page]]console.log(page)// 下一项page++// 递归调用useTwoArr(page)})}useTwoArr(0)
完整代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- 引入vue --><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script><!-- elementui引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!--elementui 引入组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script><!-- axios --><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script></head><body><div id="app"><el-tablev-loading="loading":data="tableData"height="500"style="width: 500px"><el-table-columnprop="id"label="学号"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="value"label="座号"></el-table-column></el-table></div><script>// 创建一个Vue实例new Vue({el: '#app',data() {return {loading: true,tableData:[],apiData:[],}},mounted() {this.getGroudData()},methods:{async getGroudData(){// this.loading=trueconst res=await axios.get('http://124.223.69.156:3300/bigData')// console.log(res)if(res.data.code===0){this.loading=falsethis.apiData=res.data.data// console.log(this.apiData)// top10// this.tableData=this.apiData.slice(0,10)// 分组let twoArr=this.buildTablePreTen(this.apiData)console.log(twoArr)// 渲染数据-定时器方法:/* twoArr.forEach((item,index)=>{setTimeout(()=>{this.tableData=[...this.tableData,...item]},20*index)console.log(index)}) *//*渲染数据-动画requestAnimationFram方法使用requestAnimationFrame可以将动画的每一帧绘制操作封装为一个回调函数，并将这个回调函数传递给requestAnimationFrame函数。当浏览器准备进行下一帧绘制时，会自动调用这个回调函数，从而实现了动画的循环。 */// 定义一个渲染函数const useTwoArr=(page)=>{if(page>twoArr.length-1) return// 用动画讲求来优化requestAnimationFrame(()=>{// 取一项,拼接一项this.tableData=[...this.tableData,...twoArr[page]]console.log(page)// 下一项page++// 递归调用useTwoArr(page)})}useTwoArr(0)}},/*分组构造数据每组10条10万条分原1万组*/buildTablePreTen(arr){let i=0let res=[]// 1万条数据渲染while(i<10000){res.push(arr.slice(i,i+10))i=i+10}return res}}});</script> </body>
</html>
相关文章：
解决1万条数据前端渲染不卡的问题
万级数据前端渲染优化 解决思路requestAnimationFrame完整代码 解决思路 将数据分组，通过定时器或requestAnimationFrame两种方式分组渲染到Dom上 requestAnimationFrame 渲染数据-动画requestAnimationFram方法 使用requestAnimationFrame可以将动画的每一帧绘制…...
如何编写一个API——Python代码示例及拓展
下面是一个必备的API的demo，包括用户认证、数据库交互、错误处理和更复杂的异步任务处理。使用Flask来创建一个RESTful API，涉及用户注册、登录、以及获取用户信息的功能。 示例1：编写API 安装依赖 首先，你需要安装以下库来支持示例的功能： pip install flask flask-c…...
UMPNet: Universal Manipulation Policy Network for Articulated Objects
1. 摘要 UMPNet是一个基于图像的策略网络，能够推理用于操纵铰接物体的闭环动作序列。该策略支持6DoF动作表示和可变长度轨迹。 为处理多种类的物体，该策略从不同的铰接结构中学习，并泛化到未见过的物体或类别上。该策略是以自监督探索的方式…...
高通 Android 12/13冻结屏幕
冻结屏幕很多第一次听到以为是Android一种异常现象，实则不然，就是防止用户在做一些非法操作导致问题防止安全漏洞问题。 1、主要通过用户行为比如禁止下拉状态栏和按键以及onTouch事件拦截等，不知道请看这篇文章（Touch事件传递流…...
C++实现图的存储和遍历
前言 许多新手友友在初学算法和数据结构时，会被图论支配过。我这里整理了一下图论常见的存储和遍历方式，仅供参考。如有问题，欢迎大佬们批评指正。 存储我将提到四种方式：邻接矩阵、vector实现邻接表、数组模拟单链表实现的前向星…...
AI--构建检索增强生成 (RAG) 应用程序
LLM 所实现的最强大的应用之一是复杂的问答 (Q&A) 聊天机器人。这些应用程序可以回答有关特定源信息的问题。这些应用程序使用一种称为检索增强生成 (RAG) 的技术。 典型的 RAG 应用程序有两个主要组件 索引：从源中提取数据并对其进行索引的管道。这通常在线下…...
QT7_视频知识点笔记_4_文件操作，Socket通信：TCP/UDP
1.事件分发器，事件过滤器（重要程度：一般） event函数 2.文件操作（QFile） 实现功能：点击按钮，弹出对话框，并且用文件类读取出内容输出显示在控件上。 #include <QFi…...
智慧社区管理系统：打造便捷、安全、和谐的新型社区生态
项目背景 在信息化、智能化浪潮席卷全球的今天，人们对于生活品质的需求日益提升，期待居住环境能与科技深度融合，实现高效、舒适、安全的生活体验。在此背景下，智慧社区管理系统应运而生，旨在借助现代信息技术手段&…...
CustomTkinter：便捷美化Tkinter的UI界面（附模板）
CustomTkinter是一个基于Tkinter的Python用户界面库。 pip3 install customtkinter它提供了各种UI界面常见的小部件。这些小部件可以像正常的Tkinter小部件一样创建和使用，也可以与正常的Tkinter元素一起使用。 它的优势如下： CustomTkinter的小部件和…...
使用MicroPython和pyboard开发板（15）：使用LCD和触摸传感器
使用LCD和触摸传感器 pybaord的pyb对LCD设备也进行了封装，可以使用官方的LCD显示屏。将LCD屏连接到开发板，连接后。 使用LCD 先用REPL来做个实验，在MicroPython提示符中输入以下指令。请确保LCD面板连接到pyboard的方式正确。 >>…...
c++20 std::jthread 源码简单赏析与应用
std::jthread 说明： std::jthread 是 C20 中引入的一个新特性，它是线程库中的一个类，专门用于处理 std::thread 与 std::stop_token 和 std::stop_source 之间的交互，以支持更优雅和安全的线程停止机制。 std::stop_source控制…...
自动化测试里的数据驱动和关键字驱动思路的理解
🍅 视频学习：文末有免费的配套视频可观看 🍅 点击文末小卡片，免费获取软件测试全套资料，资料在手，涨薪更快 初次接触自动化测试时，对数据驱动和关键字驱动不甚理解，觉得有点故弄玄须…...
【30天精通Prometheus：一站式监控实战指南】第6天：mysqld_exporter从入门到实战：安装、配置详解与生产环境搭建指南，超详细
亲爱的读者们👋 欢迎加入【30天精通Prometheus】专栏！📚 在这里，我们将探索Prometheus的强大功能，并将其应用于实际监控中。这个专栏都将为你提供宝贵的实战经验。🚀 Prometheus是云原生和DevOps的…...
浅析智能体开发（第二部分）：智能体设计模式和软件架构
大语言模型（LLM）驱动的智能体（AI Agent）展现出许多传统软件所不具备的特征。不仅与传统软件的设计理念、方法、工具和技术栈有显著的差异，AI原生（AI Native）的智能体还融入了多种新概念和技术。…...
Unity学习笔记---Transform组件
组件介绍 Transform组件在每个游戏对象中都存在，且只存在一个。该组件保存了游戏对象的位置、平移、旋转、缩放等信息。 组件相关方法 //获取当前游戏对象的Transform组件this.transform; getObject.transform; GetComponent<Transform>();//属性 gameObje…...
springboot+jsp校园理发店美容美发店信息管理系统0h29g
前台管理:会员管理、会员预定、开单点单、收银结帐、技师提成 后台管理:数据维护、物料管理、数据查询、报表分析、系统设置等 灵活的付款方式，支持现金、挂帐、会员卡，同时支持多种折扣方式并可按用户要求设置多种结帐类型善的充值卡管理模块:支持优惠卡…...
css - sass or scss ？
总的来说，Sass 和 SCSS 提供的功能是一样的，选择哪种语法主要取决于你的个人或团队的偏好。...
html5 笔记01
01 表单类型和属性 input的type属性 单行文本框: typetext 电子邮箱 : typeemail 地址路径 : type url 定义用于输入数字的字段: typenumber 手机号码: typetel 搜索框 : typesearch 定义颜色选择器 : typecolor 滑块控件 : typerange 定义日期 :typedate 定义输入时间的控件…...
E5063A是德科技e5063a网络分析仪
181-2461-8938产品概述： 简 述： E5063A 是低成本网络分析仪，可提供优化的性能和功能，适用于测试简单的无源器件，例如天线、电缆、滤波器和 PCB 等。它利用工业标准 ENA 系列始终如一的测量架构，能够极…...
)
【星海随笔】微信小程序(二)
WXML 模板语法 - 数据绑定 在data中定义页面的数据 在页面对应的 .js 文件中，把数据定义到 data 对象中即可： Page({data: {// 字符串类型的数据info: init data,// 数据类型的数据msgList: [{msg: hello},{msg: world}]} })Mustache 语法的格式 把 …...
观成科技：隐蔽隧道工具Ligolo-ng加密流量分析
1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具，该工具基于TUN接口实现其功能，利用反向TCP/TLS连接建立一条隐蔽的通信信道，支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式，适应复杂网…...
微信小程序之bind和catch
这两个呢，都是绑定事件用的，具体使用有些小区别。 官方文档： 事件冒泡处理不同 bind：绑定的事件会向上冒泡，即触发当前组件的事件后，还会继续触发父组件的相同事件。例如，有一个子视图绑定了b…...
Admin.Net中的消息通信SignalR解释
定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...
基于Flask实现的医疗保险欺诈识别监测模型
基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施，由雇主和个人按一定比例缴纳保险费，建立社会医疗保险基金，支付雇员医疗费用的一种医疗保险制度， 它是促进社会文明和进步的…...
QT： `long long` 类型转换为 `QString` 2025.6.5
在 Qt 中，将 long long 类型转换为 QString 可以通过以下两种常用方法实现： 方法 1：使用 QString::number() 直接调用 QString 的静态方法 number()，将数值转换为字符串： long long value 1234567890123456789LL; …...
蓝桥杯3498 01串的熵
问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798， 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...
AI，如何重构理解、匹配与决策？
AI 时代，我们如何理解消费？ 作者｜王彬 封面｜Unplash 人们通过信息理解世界。 曾几何时，PC 与移动互联网重塑了人们的购物路径：信息变得唾手可得，商品决策变得高度依赖内容。 但 AI 时代的来…...
算法岗面试经验分享-大模型篇
文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer （1）资源 论文&a…...
MacOS下Homebrew国内镜像加速指南（2025最新国内镜像加速）
macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 🍺 最新版brew安装慢到怀疑人生？别怕，教你轻松起飞！ 最近Homebrew更新至最新版，每次执行 brew 命令时都会自动从官方地址 https://formulae.…...
【p2p、分布式，区块链笔记 MESH】Bluetooth蓝牙通信 BLE Mesh协议的拓扑结构 定向转发机制
目录 节点的功能承载层（GATT/Adv）局限性： 拓扑关系定向转发机制定向转发意义 CG 节点的功能 节点的功能由节点支持的特性和功能决定。所有节点都能够发送和接收网格消息。节点还可以选择支持一个或多个附加功能，如 Configuration …...