前端如何处理后端一次性返回的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; 
    }
    
    1. 遍历这个二维数组,对每一项数据使用定时器一堆堆赋值渲染即可
    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); 
    }
    
  • 使用滚动加载数据(滚动底部,加载一堆) 以及虚拟列表处理等方式

你可能感兴趣的:(前端,javascript,开发语言)