如何巧妙处理后端一次性返回10万条数据

问题

后端一次性返回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); 
}

除了以上方案之外，还可以使用滚动加载数据（滚动底部，加载一堆），以及虚拟列表处理等方式。这里就不多赘述。