Wie können Sie über große Arrays iterieren, ohne den UI-Thread zu blockieren?

Nicht blockierende Array-Iterationsstrategien

Bei der Iteration über große Arrays ist es wichtig, eine Blockierung des UI-Threads und eine Beeinträchtigung der Benutzererfahrung zu vermeiden. In diesem Artikel werden verschiedene Strategien zum Erreichen einer nicht blockierenden Iteration ohne Verwendung von Web-Workern und mit der Verwendung von Web-Workern untersucht.

Ohne Web-Worker

Für Code, der interagieren muss Beim DOM besteht eine gängige Lösung darin, die Iteration in kleinere Abschnitte aufzuteilen und diese mithilfe von Timern asynchron zu verarbeiten. Dadurch kann der Browser andere Ereignisse verarbeiten und die Benutzeroberfläche reagiert.

<code class="javascript">function processLargeArray(array) {
  // Chunk size for processing
  var chunk = 100;
  var index = 0;

  function doChunk() {
    var cnt = chunk;
    while (cnt-- && index < array.length) {
      // Process array[index] here
      ++index;
    }
    if (index < array.length) {
      // Set timeout for async iteration
      setTimeout(doChunk, 1);
    }
  }

  doChunk();
}</code>

Alternativ können Sie eine allgemeinere Funktion definieren, die eine Rückruffunktion zur Verarbeitung jedes Elements akzeptiert:

<code class="javascript">function processLargeArrayAsync(array, fn, chunk, context) {
  context = context || window;
  chunk = chunk || 100;
  var index = 0;

  function doChunk() {
    var cnt = chunk;
    while (cnt-- && index < array.length) {
      // Call the callback with args (value, index, array)
      fn.call(context, array[index], index, array);
      ++index;
    }
    if (index < array.length) {
      // Set timeout for async iteration
      setTimeout(doChunk, 1);
    }
  }

  doChunk();
}</code>

Um das Erraten der optimalen Chunk-Größe zu vermeiden, können Sie einen intervallbasierten Ansatz verwenden:

<code class="javascript">function processLargeArrayAsync(array, fn, maxTimePerChunk, context) {
  context = context || window;
  maxTimePerChunk = maxTimePerChunk || 200;
  var index = 0;

  function now() {
    return new Date().getTime();
  }

  function doChunk() {
    var startTime = now();
    while (index < array.length && (now() - startTime) <= maxTimePerChunk) {
      // Call the callback with args (value, index, array)
      fn.call(context, array[index], index, array);
      ++index;
    }
    if (index < array.length) {
      // Set timeout for async iteration
      setTimeout(doChunk, 1);
    }
  }

  doChunk();
}</code>

Mit Web Workern

Web Worker bieten bei der Iteration eine weitere Lösung Code benötigt keinen DOM-Zugriff. Der zeitaufwändige Code wird in eine separate Skriptdatei verschoben und in einem Arbeitsthread ausgeführt. Nach Abschluss kann der Worker Ergebnisse zurück in den Hauptthread posten, ohne die Ereignisverarbeitung zu behindern.

Das obige ist der detaillierte Inhalt vonWie können Sie über große Arrays iterieren, ohne den UI-Thread zu blockieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!