数据太多，页面加载太慢怎么办

前提：一个展示页面，不是以表格的形式进行展示，直接把内容展示出来，没有做分页，一进页面就会先去加载所有数据，当数据越来越多时，就会出现加载速度慢，白屏的情况，用户体验不好

过程：原本时自己再试懒加载，但是试着去加并没有成功，在前端技术群里问大佬们这种情况，有大佬直接告诉说分组渲染，并分享给我一篇博客，博客直通车：原博客地址，我是模仿这篇博客的写法，解决了之后来自己的博客记录一下，非常感谢分享的大佬以及这篇博客的博主,大家想要更加详细的解释可以点链接去看

解决：

1.我的页面请求了一个接口的数据，目前大概有100多条，以后会更多，接口数据是直接请求成功全部拿到，但是一下子全部渲染到页面就会很慢

2.可以将接口接收的所有数据根据需要进行分堆，以下以5个一堆进行举例

3.如果100个数据，5个一堆，就是20堆，用定时器，在每隔500/60=0.833333ms加一堆渲染

代码部分：

分堆方法，每堆五个数据

const averageFn=arr=>{

     let i = 0;

     let res = []

     while(i<arr.length){   //首先拿到需要分堆的数组的长度，进行判断

         res.push(arr.slice(i,i+5));   //每循环一次给res数据加5条

         i=i+5;   //i初始是0，循环一次i+5,知道i大于数组长度，停止循环

     }

     return res  //上面每次循环res多一个长度为5的数组,本身传进来的数组如果长度是175，那么最后的 
                   res就会是长度为34（175/5-1）的数组，而且数组中的每个元素都是长度为5的数组

 }

获取全部数据并进行分堆

async function getPurchaseListData(filterData){
   purchaseList.value = []
   //先请求所有数据
   const res = await $http.get('/purchase/payment/in_purchase/', filterData)
   //因为我项目需要，拿到数据之后先进行处理数据
   if(res.status===200){
       if (typeof res.data === 'object') {
         res.data = res.data.map(item => {
           const { asset_list } = item
           return {
             isExpandAll: true,  //是否显示
             ...item,
             asset_list: asset_list.map((item, index) => {
               return {
                 ...item,
                 order: index < 9 ? `0${index + 1}` : index + 1,  //加序号
               }
             }),
           }
         })
       }
   }
//处理完数据后，调用分堆方法对全部数据进行分堆
   let purchaseListTwo = averageFn(res.data)  //purchaseListTwo就是上面的res
   //如果长度为34，那会每隔500/60=0.833333ms循环一次，给purchaseList.value数组本身数据的基础 
     上，再每次增加一个5个长度的数组，一共循环35次
   for(let i=0;i<purchaseListTwo.length;i++){ 
     setTimeout(() => {  //在很短的时间内创建许多个定时任务去处理
         //赋值渲染
         purchaseList.value=[...purchaseList.value,...purchaseListTwo[i]]
     }, 500*i);//设定的间隔时间500/60=0.833333ms
   }
 }

最后的效果就是，页面会先出来5个数据，然后每0.83ms再增加5个数据，以此类推

res的打印结果

有大佬路过还请多多赐教啊~