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

文章目录

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

    一、定时渲染

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

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

      • 核心实现

        // 渲染到页面表格的数据let pagedata = [];const plan = async () => {// 例如 bigdata 是接口请求到的十万条数据const bigdata = await getBigDat();// 分堆处理let arr = average(bigdata)// 渲染数据for(let i=0; isetTimeout(()={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