解决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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/841018.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HCIP-Datacom-ARST自选题库__ISIS简答【3道题】

1.IS-1S是链路状态路由协议&#xff0c;便用SPF算法进行路由计算。某园区同时部署了IPv4和IPV6井运行IS-IS实现网络的互联互通&#xff0c;如图所示&#xff0c;该网络IPv4和IPV6开销相同&#xff0c;R1和R4只支持IPV4。缺省情况下&#xff0c;计算形成的IPv6最短路径树中&…

MySQL-笔记-10.关系模式的规范化理论

目录 10.1 规范化内容和异常 问题1:数据冗余 问题2:更新异常 问题3:插入异常 问题4:删除异常 10.2 函数依赖 10.2.1 函数依赖的定义 10.2.2 函数依赖与属性之间类型有关 10.2.3 函数依赖的类型 10.2.3.1 平方函数依赖、非平凡函数依赖 10.2.3.2 完全函数依赖、部分函数…

python数据分析——字符串和文本数据2

参考资料&#xff1a;活用pandas库 1、字符串格式化 &#xff08;1&#xff09;格式化字符串 要格式化字符串&#xff0c;需要编写一个带有特殊占位符的字符串&#xff0c;并在字符串上调用format方法向占位符插入值。 # 案例1 varflesh wound s"Its just a {}" p…

solidworks画螺母学习笔记

螺母 单位mm 六边形 直径16mm&#xff0c;水平约束&#xff0c;内圆直径10mm 拉伸 选择两侧对称&#xff0c;厚度7mm 拉伸切除 画相切圆 切除深度7mm&#xff0c;反向切除 拔模角度45 镜像切除 倒角 直径1mm 异形孔向导 螺纹线 偏移打勾&#xff0c;距离为2mm…

Parquet文件格式详解(含行、列式存储区别)

Parquet文件格式详解 Parquet 是一种列式存储格式&#xff0c;旨在高效地存储和处理大规模数据集。它被设计用于在大数据生态系统中进行数据存储和分析&#xff0c;如 Apache Hadoop 和 Apache Spark。 行式存储 vs 列式存储 在了解 Parquet 文件格式之前&#xff0c;先来对…

java:static关键字用法

在静态方法中不能访问类的非静态成员变量和非静态方法&#xff0c; 因为非静态成员变量和非静态方法都必须依赖于具体的对象才能被调用。 从上面代码里看出&#xff1a; 1.静态方法不能调用非静态成员变量。静态方法test2()中调用非静态成员变量address&#xff0c;编译失败…

从容应对亿级QPS访问,Redis还缺少什么?no.29

众所周知&#xff0c;Redis 在线上实际运行时&#xff0c;面对海量数据、高并发访问&#xff0c;会遇到不少问题&#xff0c;需要进行针对性扩展及优化。本课时&#xff0c;我会结合微博在使用 Redis 中遇到的问题&#xff0c;来分析如何在生产环境下对 Redis 进行扩展改造&…

算法金 | Dask,一个超强的 python 库

本文来源公众号“算法金”&#xff0c;仅用于学术分享&#xff0c;侵权删&#xff0c;干货满满。 原文链接&#xff1a;Dask&#xff0c;一个超强的 python 库 1 Dask 概览 在数据科学和大数据处理的领域&#xff0c;高效处理海量数据一直是一项挑战。 为了应对这一挑战&am…

滑动菜单栏

效果如下&#xff1a; NavigationView 新建menu布局,表示菜单栏的选项 <menu xmlns:android"http://schemas.android.com/apk/res/android"> <group android:checkableBehavior"single"> <item android:id"id/navCall" android…

海外CDN加速方式

随着全球化经济的进一步推进和互联网时代的到来&#xff0c;给对外贸易行业带来了巨大的商机&#xff0c;众多传统的贸易公司都纷纷建立起自已的外贸网站或服务站点等各种信息化平台&#xff0c; 相当多的贸易公司也从他们所构建的平台中得到了很高的利益&#xff0c;然而由于当…

医疗科技:UWB模块为智能医疗设备带来的变革

随着医疗科技的不断发展和人们健康意识的提高&#xff0c;智能医疗设备的应用越来越广泛。超宽带&#xff08;UWB&#xff09;技术作为一种新兴的定位技术&#xff0c;正在引领着智能医疗设备的变革。UWB模块作为UWB技术的核心组成部分&#xff0c;在智能医疗设备中发挥着越来越…

抖音运营_打造高流量的抖音账号

目录 一 账号定位 行业定位 用户定位 内容定位 二 账号人设 我是谁? 我的优势 我的差异化 三 创建账号 名字 头像 简介 四 抖音养号 为什么要养号&#xff1f; 抖音快速养号 正确注册抖音账号 一机一卡一号 实名认证 正确填写账号信息 养号期间的操作 五…

韵搜坊 -- Elastic Stack快速入门

文章目录 现有问题Elastic Stack介绍&#xff08;一套技术栈&#xff09;安装ES安装KibanaElasticsearch概念倒排索引Mapping分词器IK分词器&#xff08;ES插件&#xff09;打分机制 ES的几种调用方式restful api调用&#xff08;http 请求&#xff09;kibana devtools客户端调…

SINet(CVPR2020)复现及问题记录

1. 创建虚拟环境 我创建的是 python 3.8 版本 conda create -n SINet python3.8然后进入虚拟环境 2. 克隆项目代码 git clone https://github.com/DengPingFan/SINet.git3. 安装依赖 我安装的是 pytorch1.11.0版本&#xff0c; 通过 conda 安装 pytorch&#xff0c;torchv…

IT学习笔记--Docker

Docker基本概念&#xff1a; Docker是一个开源的应用容器引擎&#xff0c;基于 Go 语言 并遵从 Apache2.0 协议开源。可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中&#xff0c;然后发布到任何流行的 Linux 机器上&#xff0c;也可以实现虚拟化。容器是完…

代码随想录35期Day50-Java

Day50题目 LeetCode309买卖股票有冷冻期 核心思想:因为有冷冻期,和之前的题目的状态就有所不同,状态的确定是很难的 0 持有股票的状态 1 没有股票的状态 2 当天卖出股票 3 前一天卖出股票,今天就是冷冻期状态 class Solution {public int maxProfit(int[] prices) {// 四个状…

程序员做推广?我劝你别干

关注卢松松&#xff0c;会经常给你分享一些我的经验和观点。 这是卢松松会员专区&#xff0c;一位会员朋友的咨询&#xff0c;如果你也有自研产品&#xff0c;但不知道如何推广&#xff0c;一定要阅读本文!强烈建议收藏关注&#xff0c;因为你关注的人&#xff0c;决定你看到的…

AWS容器之Fargate

AWS Fargate是亚马逊提供的一种容器管理服务&#xff0c;它允许开发人员在AWS云中轻松运行容器化应用程序&#xff0c;而无需管理底层的服务器基础架构。Fargate可以自动管理容器的部署、扩展和负载平衡&#xff0c;并提供了与ECS和EKS等AWS容器服务集成的能力。适用于容器的无…

技术周总结 2024.05.20~05.26 (Java架构师 数据库理论 MyBatis)

文章目录 一、 问题01 在数据库理论的阿姆斯特朗公理中的自反性规则指什么自反性&#xff08;Reflexivity&#xff09;详细解释自反性规则的形式化描述自反性规则的具体含义示例 总结 二、问题02: 数据库理论中的笛卡尔联结和自然联结区别笛卡尔联结&#xff08;Cartesian Join…