UI の応答性を維持するために、JavaScript で大きな配列を非同期に反復処理するにはどうすればよいですか?

UI の応答性を維持するために配列を非同期的に反復する

大規模な配列を扱う場合、ループ内で配列を操作すると UI がフリーズし、ユーザー操作が妨げられ、ユーザー エクスペリエンスが低下する可能性があります。この問題を回避するには、次のようないくつかの手法を採用します。

WebWorkers を使用しない

コードが DOM と対話する必要があるシナリオでは、WebWorkers を使用することは現実的ではありません。代わりに、ループを小さなチャンクに分割し、setTimeout() などのタイマーを使用してそれらを順番に実行することを検討してください。これにより、ブラウザ エンジンがその間に他のイベントを処理できるようになり、UI のロックアップが防止されます。

この手法を使用する関数の例を次に示します。

<code class="javascript">function processLargeArray(array) {
  // Set the chunk size to determine how many items to process at once.
  var chunk = 100;
  var index = 0;

  function doChunk() {
    var cnt = chunk;
    while (cnt-- &amp;&amp; index < array.length) {
      // Process array[index] here.
      ++index;
    }
    if (index < array.length) {
      // Set a timeout to continue processing asynchronously.
      setTimeout(doChunk, 1);
    }
  }
  
  doChunk();
}</code>

また、次の汎用バージョンを作成することもできます。コールバック関数を呼び出します:

<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-- &amp;&amp; index < array.length) {
      // Call the callback with args (value, index, array).
      fn.call(context, array[index], index, array);
      ++index;
    }
    if (index < array.length) {
      // Set a timeout for continued async processing.
      setTimeout(doChunk, 1);
    }
  }

  doChunk();
}</code>

WebWorkers を使用

DOM と対話しないコードの場合、WebWorkers を利用するのが効果的なアプローチです。 WebWorkers はメイン UI スレッドから独立して実行されるため、UI 処理は影響を受けません。ただし、WebWorker では JavaScript コードを別のスクリプト ファイルに分割する必要があることに注意してください。

WebWorker の簡単な使用例を次に示します。

<code class="javascript">// Create a new WebWorker.
var worker = new Worker('worker.js');

// Send data to the worker.
worker.postMessage(array);

// Listen for messages from the worker.
worker.addEventListener('message', function(e) {
  // Process the results returned from the worker.
});</code>

worker.js ファイル内:

<code class="javascript">// Receive data from the main thread.
self.addEventListener('message', function(e) {
  var array = e.data;

  // Process the array in the web worker.

  // Send the results back to the main thread.
  self.postMessage(results);
});</code>

これらの手法を採用すると、UI の応答性を損なうことなく大規模な配列を反復処理でき、スムーズでインタラクティブなユーザー エクスペリエンスが保証されます。

以上がUI の応答性を維持するために、JavaScript で大きな配列を非同期に反復処理するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。