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

文章目录

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

    一、定时渲染

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

      1. 例如，前端请求到十五条数据以后，先不直接渲染，而是将这些数据分堆分批次渲染
      2. 比如，一堆放10条数据，十万条数据就是一万堆
      3. 然后使用定时器一次渲染一堆，渲染一万次即可
      

      • 核心实现

        // 渲染到页面表格的数据
        let pagedata = [];
        const plan = async () => {
        	// 例如 bigdata 是接口请求到的十万条数据
        	const bigdata = await getBigDat();
        	// 分堆处理
        	let arr = average(bigdata)
        	// 渲染数据
        	for(let i=0; i
        		setTimeout(()={
        			pagedata = [...pagedata, ...arr[i]]
        		},20*i)
        	}
        }
        const average = (arr) => {
        	let i = 0;
        	let res = [];
        	while(i  
        

        • 优化掉帧：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  
          二、触底加载
           
          

          • 在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)
              

              • 使用插件
                • 核心代码

                  // 渲染到页面表格的原始数据
                  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