Wie verarbeitet das Front-End 100.000 vom Back-End zurückgegebene Daten gleichzeitig?

Frage: Das Backend gibt 100.000 Daten auf einmal zurück. Wie geht das Frontend damit um?

Wenn das Frontend diese 100.000 Daten direkt auf der Seite rendert, besteht kein Zweifel daran, dass unsere Seite hängen bleibt. Daher ist diese Lösung definitiv nicht ratsam. Wie sollten wir sie also lösen?

Lösung

• Option 1: Geplantes Laden + Rendern in Stapeln und Stapeln nacheinander

  Lösungen:

  1. Nachdem das Front-End die 100.000 Daten vom Back-End erhält, teilt es die 100.000 Daten zunächst in Stapel und Stapel auf.
  2. Angenommen, ein Stapel speichert 10 Daten, dann gibt es 10.000 Stapel mit 100.000 Daten.
  3. Verwenden Sie einen Timer, um mehrere davon auf einmal zu rendern, und zwar 10.000 Mal.

  So teilen Sie es in Stapel und Chargen auf:

  1. Schreiben wir zunächst eine Funktion, um 100.000 Daten in Stapel aufzuteilen (jeweils eine bestimmte Datenlänge abzufangen).

  2. Beispielsweise werden 10 Daten gleichzeitig abgefangen, der erste Abfang ist 0–9, der zweite Abfang ist 10–19 und andere Abfangvorgänge mit fester Länge.

  Die Originaldaten lauten beispielsweise: [1,2,3,4,5,6,7,8]. Die Daten werden in Stapel unterteilt (ein Stapel von 3). Nach dem Stapeln handelt es sich um ein zweidimensionales 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. Durchlaufen Sie dieses zweidimensionale Array und verwenden Sie einen Timer, um jedes Datenelement zuzuweisen und darzustellen.

  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: Verwenden Sie zum Paging die Paging-Komponente im Frontend

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

• Verwenden Sie Scrollen, um Daten (nach unten scrollen, eine Menge laden) und 虚拟列表Verarbeitungsmethoden zu laden