前端如何处理后端一次性返回的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); 
  }
  

• 使用滚动加载数据（滚动底部，加载一堆） 以及虚拟列表处理等方式