【前端】处理一次性十万条数据渲染方案(不考虑后端分页)
文章目录
- 一、定时渲染
- 二、触底加载
一、定时渲染
- 思路:定时加载,分堆处理
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;
}