前提:一个展示页面,不是以表格的形式进行展示,直接把内容展示出来,没有做分页,一进页面就会先去加载所有数据,当数据越来越多时,就会出现加载速度慢,白屏的情况,用户体验不好
过程:原本时自己再试懒加载,但是试着去加并没有成功,在前端技术群里问大佬们这种情况,有大佬直接告诉说分组渲染,并分享给我一篇博客,博客直通车:原博客地址,我是模仿这篇博客的写法,解决了之后来自己的博客记录一下,非常感谢分享的大佬以及这篇博客的博主,大家想要更加详细的解释可以点链接去看
解决:
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的打印结果
有大佬路过还请多多赐教啊~