How does the front end process 100,000 pieces of data returned by the back end at one time?

Question: The backend returns 100,000 pieces of data at one time, how does the frontend handle it?

If the front end directly renders these 100,000 pieces of data onto the page, there is no doubt that our page will get stuck, so this solution is definitely not advisable, so how should we solve it?

solution

• Option 1: Scheduled loading + rendering in batches and piles in sequence

  Solutions:

  1. After the front-end gets the 100,000 pieces of data from the back-end, it first divides the 100,000 pieces of data into piles and batches.
  2. Assuming that a pile stores 10 pieces of data, then there are 10,000 piles of 100,000 pieces of data.
  3. Use a timer to render a bunch of them at once and render them 10,000 times.

  How to divide into piles and batches:

  1. Let's first write a function to divide 100,000 pieces of data into piles (intercept a certain length of data at a time)

  2. For example, 10 pieces of data are intercepted at one time, the first interception is 0-9, the second interception is 10~19 and other fixed-length interceptions.

  For example, the original data is: [1,2,3,4,5,6,7,8]. The data is divided into piles (a pile of 3). After the heaping, it is a two-dimensional array, [ [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. Traverse this two-dimensional array and use a timer to assign and render each item of data.

  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
    }
  }
  

• Option 2: Use the paging component on the front end for paging

  getShowTableData() {
        
         
    // 获取截取开始索引 
    let begin = (this.pageIndex - 1) * this.pageSize; 
    // 获取截取结束索引
     let end = this.pageIndex * this.pageSize; 
    // 通过索引去截取，从而展示
    this.showTableData = this.allTableData.slice(begin, end); 
  }
  

• Use scrolling to load data (scroll to the bottom, load a bunch) and 虚拟列表processing methods