问题
后端一次性返回10万条数据,前端应该如何处理呢?
如果前端直接把这10万条数据渲染到页面上,毫无疑问,我们的页面肯定会卡死,所以这种方案肯定是不可取的,那么我们该如何解决呢?
解决方案
方案一:定时加载+分批分堆依次进行渲染
解决思路:
1.前端拿到后端的10万条数据后,先将10万条数据分堆分批次
2.假设一堆存放10条数据,那么十万条数据就有一万堆
3.使用定时器,一次渲染一堆,渲染一万次就可以了
如何分堆分批次:
1.我们先写一个函数,用于将10万条数据进行分堆(一次截取一定长度的数据)
2.比如一次截取10条数据,头一次截取0-9,第二次截取10~19等固定长度的截取。
举例原来的数据是:[1,2,3,4,5,6,7,8],对该数据进行分堆(一堆3个),分堆之后是一个二维数组,[ [1,2,3], [4,5,6], [7,8]]
// 创建一个每堆10个数据的分堆函数
function averageFn(arr) {
let i = 0;
let res = [];
while (i < arr.length) {
res.push(arr.slice(i, i + 10)); 用于分堆
i = i + 10;
}
return res;
}
3.遍历这个二维数组,对每一项数据使用定时器一堆堆赋值渲染即可。
async plan(url) {
this.loading = true;
const res = await axios.get(url);
this.loading = false;
let twoDArr = averageFn(res.data.data);
for (let i = 0; i < twoDArr.length; i++) {
// 相当于在很短的时间内创建许多个定时任务去处理
setTimeout(() => {
this.arr = [...this.arr, ...twoDArr[i]]; // 赋值渲染
}, 1000 * i); // 17 * i // 注意设定的时间间隔... 17 = 1000 / 60
}
},
方案二:前端使用分页组件进行分页
getShowTableData() {
// 获取截取开始索引
let begin = (this.pageIndex - 1) * this.pageSize;
// 获取截取结束索引
let end = this.pageIndex * this.pageSize;
// 通过索引去截取,从而展示
this.showTableData = this.allTableData.slice(begin, end);
}
除了以上方案之外,还可以使用滚动加载数据(滚动底部,加载一堆),以及虚拟列表处理等方式。这里就不多赘述。