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

一、定时渲染

• 思路：定时加载，分堆处理

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;
}