JavaScript zeigt Zehntausende von Datenbeispielcodes gleichzeitig an

In diesem Artikel wird hauptsächlich die Implementierungsmethode von JavaScript vorgestellt, die Zehntausende von Daten gleichzeitig anzeigt. Es hat einen sehr guten Referenzwert. Schauen wir es uns mit dem Redakteur an.

Ein Kollege erzählte allen, dass er eine Interviewfrage im Internet gesehen habe: „Wenn das Backend Zehntausende von Daten an die übermittelt.“ Frontend, was ist mit dem Frontend? „Auf die Seite gerendert?“, wie antworte ich? Infolgedessen herrschte im Büro Aufregung und die Kollegen begannen nacheinander über unsere Pläne zu diskutieren. Einige sagten, dass es direkt in einer Schleife generiert und in die Seite eingefügt werden sollte; andere sagten, dass der Interviewer ein Idiot sei, wie könnte der Hintergrund Zehntausende von Daten an das Frontend übertragen? ?Ich habe sorgfältig darüber nachgedacht. Nach einer Weile spielt es keine Rolle, ob das Back-End dumm genug ist, Zehntausende von Daten an das Front-End zu senden. Wenn dies passiert, erhält das Front-End die Daten. Es konvertiert die Daten direkt in eine HTML-Zeichenfolge und fügt sie über DOM-Operationen ein. Aus diesem Grund habe ich auch eine Demo geschrieben, um sie zu testen

$.get("data.json", function (response) {
 //response里大概有13万条数据
 loadAll( response );
});
function loadAll(response) {
 var html = "";
 for (var i = 0; i < response.length; i++) {
  var item = response[i];
  html += "<li>title:" + item.title + " content:" + item.content + "</li>";
 }
 $("#content").html(html);
}

data.json enthält ungefähr 130.000 Daten. Nach dem Abrufen der Daten über Ajax werden die Daten auf einfachste und gröbste Weise angezeigt Aktualisieren Sie die Seite, um die Daten anzuzeigen. Der gesamte Vorgang dauert ungefähr 5 Sekunden. Die Pause ist sehr offensichtlich. Ich habe die Laufzeit des Codes grob beobachtet und festgestellt, dass der Prozess des Schleifens zum Generieren von Zeichenfolgen tatsächlich nicht zu zeitaufwändig ist. Der Leistungsengpass ist der Prozess des Einfügens von HTML-Zeichenfolgen in Dokumente, nämlich $("#content"). html(html); Bei der Ausführung dieses Codes müssen immerhin 130.000 LI-Elemente in das Dokument geschoben werden. Es ist vernünftig, dass die Seitenrenderinggeschwindigkeit langsam ist.

Da das gleichzeitige Rendern von 130.000 Datenstücken dazu führt, dass die Seite langsam geladen wird, können wir nicht so viele Daten auf einmal rendern, sondern sie in Stapeln rendern, z. B. jeweils 10.000 Stück, und sie dann vervollständigen 13 Mal, so. Dies kann die Rendergeschwindigkeit der Seite verbessern. Wenn diese 13 Vorgänge jedoch im selben Codeausführungsprozess ausgeführt werden, scheint es, dass dadurch nicht nur das Problem mit der fehlerhaften Seite nicht gelöst werden kann, sondern auch der Code komplizierter wird. Die beste Lösung für ähnliche Probleme in anderen Sprachen ist die Verwendung von Multithreading. Obwohl Javascript kein Multithreading bietet, können die beiden Funktionen setTimeout und setInterval ähnliche Auswirkungen wie Multithreading haben. Um dieses Problem zu lösen, kann daher setTimeout ins Spiel kommen. Die Funktion der setTimeout-Funktion kann als Starten eines neuen Threads angesehen werden, um die Aufgabe nach der angegebenen Zeit abzuschließen.

$.get("data.json", function (response) {
  //response里大概有13万条数据
  loadAll( response );
});

function loadAll(response) {
  //将13万条数据分组， 每组500条，一共260组
  var groups = group(response);
  for (var i = 0; i < groups.length; i++) {
    //闭包， 保持i值的正确性
    window.setTimeout(function () {
      var group = groups[i];
      var index = i + 1;
      return function () {
        //分批渲染
        loadPart( group, index );
      }
    }(), 1);
  }
}

//数据分组函数（每组500条）
function group(data) {
  var result = [];
  var groupItem;
  for (var i = 0; i < data.length; i++) {
    if (i % 500 == 0) {
      groupItem != null && result.push(groupItem);
      groupItem = [];
    }
    groupItem.push(data[i]);
  }
  result.push(groupItem);
  return result;
}
var currIndex = 0;
//加载某一批数据的函数
function loadPart( group, index ) {
  var html = "";
  for (var i = 0; i < group.length; i++) {
    var item = group[i];
    html += "<li>title:" + item.title + index + " content:" + item.content + index + "</li>";
  }
  //保证顺序不错乱
  while (index - currIndex == 1) {
    $("#content").append(html);
    currIndex = index;
  }
}

Der allgemeine Ausführungsablauf des obigen Codes ist

1. Verwenden Sie Ajax, um die Daten zu erhalten, die insgesamt verarbeitet werden müssen 130.000 Teile

2. Gruppieren Sie die Arrays in jeweils 500 Elemente, insgesamt 260 Gruppen

3. Durchlaufen Sie diese 260 Datengruppen, verarbeiten Sie jede Datengruppe separat und verwenden Sie setTimeout Funktion zum Starten eines neuen Ausführungsthreads (asynchron). Verhindert, dass der Hauptthread aufgrund der Darstellung großer Datenmengen blockiert wird.

Es gibt diesen Code in der LoadPart-Funktion

while (index - currIndex == 1) {
 $("#content").append(html);
 currIndex = index;
}

, um die Konsistenz der Reihenfolge sicherzustellen, wenn HTML schließlich in verschiedenen Threads in das Dokument eingefügt wird Dadurch wird verhindert, dass gleichzeitig ausgeführte Codes beim Einfügen von HTML gegenseitig ihre Positionen einnehmen.

Durch die Ausführung auf diese Weise wird die Seite sofort und ohne Wartezeit angezeigt. Beim Wechsel von synchron zu asynchron erhöht sich zwar der Gesamtressourcenverbrauch des Codes, die Seite kann jedoch sofort reagieren. Darüber hinaus ist die laufende Umgebung des Front-Ends der Computer des Benutzers, sodass die Verbesserung der Benutzererfahrung durch einen leichten Leistungsverlust verursacht wird lohnt sich relativ.

Obwohl die in den Beispielen genannten Situationen in realen Umgebungen kaum auftreten können, gibt es in unserer täglichen Arbeit immer einige plausible Szenarien, die uns bei der Lösung des Problems helfen können.

ps: setTimeout ist nicht wirklich multithreaded, aber der Einfachheit halber wurde das Wort Thread entlehnt

Das obige ist der detaillierte Inhalt vonJavaScript zeigt Zehntausende von Datenbeispielcodes gleichzeitig an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!