【前端】处理一次性十万条数据渲染方案(不考虑后端分页)

文章目录

    • 一、定时渲染
    • 二、触底加载

一、定时渲染

  • 思路:定时加载,分堆处理
1. 例如,前端请求到十五条数据以后,先不直接渲染,而是将这些数据分堆分批次渲染
2. 比如,一堆放10条数据,十万条数据就是一万堆
3. 然后使用定时器一次渲染一堆,渲染一万次即可
  • 核心实现
// 渲染到页面表格的数据
let pagedata = [];
const plan = async () => {// 例如 bigdata 是接口请求到的十万条数据const bigdata = await getBigDat();// 分堆处理let arr = average(bigdata)// 渲染数据for(let i=0; i<arr.length; i++){setTimeout(()=>{pagedata = [...pagedata, ...arr[i]]},20*i)}
}
const average = (arr) => {let i = 0;let res = [];while(i < arr.length){// 一堆截取10条数据res.push(arr.slice(i, i+10));i = i+10;}return res;
}
  • 优化掉帧:requestAnimationFrame

由于定时器设置了间隔时间,当数据滚动较快,会导致页面渲染跟不上,从而出现掉帧现象

// 渲染到页面表格的数据
let pagedata = [];
const plan = async () => {// 例如 bigdata 是接口请求到的十万条数据const bigdata = await getBigDat();// 分堆处理let arr = average(bigdata)// 渲染数据useData(0);
}
const useData = (index)=>{if(index > arr.length -1){return}// 用动画请求帧优化requestAnimationFrame(()=>{pagedata = [...pagedata, ...arr[index]]index = index + 1;// 递归调用useData(index)})
}
const average = (arr) => {let i = 0;let res = [];while(i < arr.length){// 一堆截取10条数据res.push(arr.slice(i, i+10));i = i+10;}return res;
}

二、触底加载

  • 在vue中需要使用到饿了么的一个插件包el-table-infinite-scroll【官方文档】

  • 安装插件

npm install --save el-table-infinite-scroll
  • 引用插件
import Vue from 'vue';
import elTableInfiniteScroll from 'el-table-infinite-scroll';Vue.use(elTableInfiniteScroll)
  • 使用插件
<el-table:data="tabledata"v-el-table-infinite-scroll="load"
>
</el-table>
  • 核心代码
// 渲染到页面表格的原始数据
let pagedata = [];
// 渲染到页面表格的实时数据
let tabledata = [];
const plan = async () => {// 例如 bigdata 是接口请求到的十万条数据const bigdata = await getBigDat();// 分堆处理pagedata = average(bigdata)// 渲染数据load()
}
const load = (arr) => {if(pagedata.length === 0){return;}// 加载的时候,把pagedata数组的第一项取出来,拼接到展示的表格数据上let arr = pagedata[0]tabledata = tabledata.concat(arr);// 拼接完成后,再把pagedata数组的第一项删除即可pagedata.shift()
}
const average = (arr) => {let i = 0;let res = [];while(i < arr.length){// 一堆截取10条数据res.push(arr.slice(i, i+10));i = i+10;}return res;
}

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

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

相关文章

pytest教程-15-多个fixture以及重命名

领取资料&#xff0c;咨询答疑&#xff0c;请➕wei: June__Go 上一小节我们学习了fixture的yield关键字&#xff0c;本小节我们讲解一下使用多个fixture的方法。 使用多个fixture 如果用例需要用到多个fixture的返回数据&#xff0c;fixture也可以return一个元组、list或字…

数据中台驱动:高效交付之道

如何保证数据中台高效交付&#xff1f; 在数据行业中&#xff0c;项目交付难题尤为突出&#xff0c;尤其在数据中台领域。数据中台项目交付面临诸多挑战&#xff0c;若不妥善解决&#xff0c;将会降低服务质量&#xff0c;影响企业数字化建设的顺利开展&#xff0c;甚至影响项目…

VoIP之音视频质量及弱网解决方案

衡量音视频通信质量的指标主要有两个&#xff0c;延迟性和服务质量&#xff0c;即延迟性越低、服务质量越高&#xff0c;则音视频通信的质量就越好。音视频质量主要受网络情况&#xff08;带宽限制&#xff0c;网络拥塞&#xff0c;网络丢包、抖动等&#xff09;影响&#xff0…

容器(0)-DOCKERFILE-安装-常用命令-部署-迁移备份-仓库

1.安装 启动 systemclt start docker //启动 systemctl status docker //状态 docker info systemclt stop docker systemctl status docker systemctl enable docker //开机启动 2.常用命令 镜像查看 docker images 镜像查看 docker status 镜像拉取 docker pull centos:…

Git 远程操作

1.分布式版本控制系统 我们目前所说的所有内容&#xff08;工作区&#xff0c;暂存区&#xff0c;版本库等等&#xff09;&#xff0c;都是在本地&#xff01;也就是在你的笔记本或者计算机上。而我们的 Git 其实是分布式版本控制系统&#xff01;什么意思呢 可以简单理解为&am…

Reset Verification IP

Reset Verification IP IP 参数及接口 IP 例化界面 相关函数 assert_reset //置位复位信号 < hierarchy_path>.assert_reset();deassert_reset //取消置位复位信号 < hierarchy_path>.deassert_reset();set_master_mode //设置 RST_VIP 模式为 Master < hi…

仿射变换下的点位纠偏

点位偏差一直是一个很头疼的问题&#xff0c;但是由于摄像头和实际环境的局限性&#xff0c;我们不得不面对这个问题。对此&#xff0c;使用判别的方式进行一个仿射变换&#xff0c;是一种非常有效的方式&#xff0c;下图中图1是基准图&#xff0c;图2是目标图&#xff0c;图3是…

【嵌入式高级C语言】11:C语言Makefile

文章目录 1 makefile的概述【只针对Linux有效】1.1 make1.2 makefile1.3 采用makefile的好处 2 Makefile的语法规则3 makefile变量3.1 自定义变量3.2 系统环境变量3.3 预定义变量 4 伪目标5 最终版本Makefile 1 makefile的概述【只针对Linux有效】 1.1 make make是个命令&…

CesiumJS开发中坐标系的相关知识

在Cesium中,坐标系主要涉及两个概念:地球固定坐标系(Earth-Fixed Frame)和参考椭球体坐标系(Reference Ellipsoid Frame)即平时我们用的坐标系: 地球固定坐标系(Earth-Fixed Frame): 地球固定坐标系是指以地球为基准的坐标系,其原点位于地球质心,坐标轴与地…

数据结构之八大排序

&#x1d649;&#x1d65e;&#x1d658;&#x1d65a;!!&#x1f44f;&#x1f3fb;‧✧̣̥̇‧✦&#x1f44f;&#x1f3fb;‧✧̣̥̇‧✦ &#x1f44f;&#x1f3fb;‧✧̣̥̇:Solitary_walk ⸝⋆ ━━━┓ - 个性标签 - &#xff1a;来于“云”的“羽球人”。…

npm 操作报错记录1- uninstall 卸载失效

npm 操作报错记录1- uninstall 卸载失效 1、问题描述 安装了包 vue/cli-plugin-eslint4.5.0 vue/eslint-config-prettier9.0.0 但是没有使用 -d &#xff0c;所以想重新安装&#xff0c;就使用 uninstall 命令卸载&#xff0c;结果卸载了没反应&#xff0c;也没有报错&#xf…

【Python】成功解决AttributeError: ‘MyClass‘ object has no attribute ‘my_attribute‘

【Python】成功解决AttributeError: ‘MyClass’ object has no attribute ‘my_attribute’ &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门…

CRM术语速览:掌握这十个专业名词,成为CRM专家

无论您是销售人员还是采购经理&#xff0c;熟悉CRM管理系统专业术语都是一门必修课。擅于运用CRM专业术语帮助您理解CRM管理系统的功能、更好的开展业务。本文与您分享不得不知道的十大CRM专业术语&#xff0c;CRM常用术语合集。常见的CRM术语包括MQL、SQL、SDR、销售漏斗等等。…

【Docker】了解Docker Desktop桌面应用程序,TA是如何管理和运行Docker容器(3)

欢迎来到《小5讲堂》&#xff0c;大家好&#xff0c;我是全栈小5。 这是《Docker容器》系列文章&#xff0c;每篇文章将以博主理解的角度展开讲解&#xff0c; 特别是针对知识点的概念进行叙说&#xff0c;大部分文章将会对这些概念进行实际例子验证&#xff0c;以此达到加深对…

AI新工具 百分50%算力确达到了GPT-4水平;将音乐轨道中的人声、鼓声、贝斯等音源分离出来等

1: Pi 百分50%算力确达到了GPT-4水平 Pi 刚刚得到了巨大的升级&#xff01;它现在由最新的 LLMInflection-2.5 提供支持&#xff0c;它在所有基准测试中都与 GPT-4 并驾齐驱&#xff0c;并且使用不到一半的计算来训练。 地址&#xff1a;https://pi.ai/ 2: Moseca 能将音乐…

JAVA虚拟机、Dalvik虚拟机和ART虚拟机简要对比

1、什么是JVM&#xff1f; JVM本质上就是一个软件&#xff0c;是计算机硬件的一层软件抽象&#xff0c;在这之上才能够运行Java程序&#xff0c;JAVA在编译后会生成类似于汇编语言的JVM字节码&#xff0c;与C语言编译后产生的汇编语言不同的是&#xff0c;C编译成的汇编语言会…

深入理解Java动态代理的实现原理

深入理解Java动态代理的实现原理 Java动态代理&#xff0c;是Java语言提供的一种灵活、强大的代理模式实现方式。相比于静态代理&#xff0c;动态代理不需要为每个接口或类单独创建代理类&#xff0c;而是在运行时根据需要动态生成。那么&#xff0c;Java动态代理是如何实现的…

Python机器学习-K近邻

K近邻 本案例使数据&#xff1a;官方数据 语言&#xff1a;python 工具&#xff1a;Jupyter 一、导包 # 导包 from sklearn.neighbors import KNeighborsClassifier from sklearn.datasets import load_wine from sklearn.model_selection import train_test_split import…

【Web安全】htaccess攻击

.htaccess攻击 文章目录 .htaccess攻击1. .htaccess文件2. 常见用法2.1. 自定义出错界面2.2. 强制文件执行方式2.3. PCRE绕过正则匹配2.4. php_value修改php设定2.5. php_value文件包含2.6. 把htaccess当作php 1. .htaccess文件 .htaccess是Apache网络服务器一个配置文件&#…

Neo4J图数据库入门示例

前言 - Neo4j和MySQL的区别 Neo4j 和 MySQL 是两种不同类型的数据库&#xff0c;它们在数据模型、用途、性能和查询语言等方面有着显著的区别。以下是它们的主要区别&#xff1a; 数据模型&#xff1a; Neo4j 是一种图数据库&#xff0c;它使用图数据模型来存储和查询数据。在…