解决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 语法的格式 把 …...
如何修复损坏的QR码？QRazyBox完整使用指南
如何修复损坏的QR码？QRazyBox完整使用指南 【免费下载链接】qrazybox QR Code Analysis and Recovery Toolkit 项目地址: https://gitcode.com/gh_mirrors/qr/qrazybox 你是否曾经遇到过这样的困境：一张重要的QR码因为打印模糊、污渍或人为损坏而…...
团队协作AI编程工具怎么选？最新热门AI编程助手实测推荐
团队协作AI编程工具怎么选？最新热门AI编程助手实测推荐开篇“团队协作时，AI编程工具怎么选才能统一代码规范、减少沟通成本？”“新手加入团队，有没有能快速适配团队代码风格、降低上手难度的AI编程助手？”“多人协同开…...
【ElevenLabs广西话语音落地实战】：20年语音AI专家亲授3步绕过方言合成陷阱，97.3%自然度实测达标
更多请点击： https://intelliparadigm.com 第一章：ElevenLabs广西话语音落地实战总览 ElevenLabs 官方尚未提供原生广西话（粤语邕浔片/平话混合语境）语音模型，但通过其 API 的自定义语音微调（Fine-tuning&…...
Lovable电商系统从零部署：手把手教你用Vue+Node+MongoDB搭建高转化率商城（含完整源码）
更多请点击： https://kaifayun.com 第一章：Lovable电商系统从零部署：手把手教你用VueNodeMongoDB搭建高转化率商城（含完整源码） Lovable电商系统是一套面向中小企业的轻量级高转化率商城解决方案，采用前后…...
5月最新10款降AI神器实测：哪个能降知网维普AI率，从99.5%降至3.8%可信吗？
2025 年 12 月 25 日知网 AIGC 检测系统升级，2026 年 4 月 27 日维普 AI 率检测平台升级…2026 毕业季，各大主流 AIGC 检测软件陆续升级系统，识别 AI 痕迹更加精准。 临近毕业，同学们看者飘红的 AIGC 检测报告、纷繁复杂的降 AI 系…...
Airflow Maintenance Dags：7个关键维护工作流彻底解决Airflow运维难题
Airflow Maintenance Dags：7个关键维护工作流彻底解决Airflow运维难题 【免费下载链接】airflow-maintenance-dags A series of DAGs/Workflows to help maintain the operation of Airflow 项目地址: https://gitcode.com/gh_mirrors/ai/airflow-maintenance-dag…...
scalar标量设计为axis接口说明
1.设计一：scalar标量核心代码 #include "array_FIFO.h"//void array_FIFO (dout_t d_o[4], din_t d_i[4], didx_t idx[4]) { //void array_FIFO (dout_t d_o[4], din_t *d_i, didx_t idx[4]) { void array_FIFO (dout_t d_o[4], din_t d_i, didx_t idx[4]…...
CANN/asc-devkit向量乘法指令asc_mull
asc_mull 【免费下载链接】asc-devkit 本项目是CANN 推出的昇腾AI处理器专用的算子程序开发语言，原生支持C和C标准规范，主要由类库和语言扩展层构成，提供多层级API，满足多维场景算子开发诉求。 项目地址: https://gitcode.com/c…...
深入理解Istio架构：控制平面与数据平面核心组件全解析
深入理解Istio架构：控制平面与数据平面核心组件全解析 【免费下载链接】istio-handbook Istio服务网格进阶实战 项目地址: https://gitcode.com/gh_mirrors/is/istio-handbook Istio作为新一代服务网格（Service Mesh）的领航者…...
CANN-opbase-昇腾NPU算子开发的基础设施为什么这么重要
CANN-opbase-昇腾NPU算子开发的基础设施为什么这么重要 所有 CANN AOL 算子仓库的底层都依赖 opbase。它不提供任何算子实现，提供的是算子注册、编译、调度的基础设施。如果你要写自定义 Ascend C 算子，opbase 是绕不过去的第一步。 opbase 提供了什么组…...