UI スレッドをブロックせずに大きな配列を反復するにはどうすればよいでしょうか?

ノンブロッキング配列反復戦略

大規模な配列を反復する場合、UI スレッドのブロックとユーザー エクスペリエンスの低下を避けることが重要です。この記事では、Web ワーカーを使用せずに、または Web ワーカーを使用してノンブロッキング反復を実現するためのさまざまな戦略を検討します。

Web ワーカーなし

対話する必要があるコードの場合DOM を使用する場合の一般的な解決策は、反復を小さなチャンクに分割し、タイマーを使用して非同期に処理することです。これにより、ブラウザは他のイベントを処理し、UI の応答性を維持できるようになります。

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

または、各要素を処理するためのコールバック関数を受け入れる、より汎用的な関数を定義することもできます。

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

最適なチャンク サイズの推測を避けるために、間隔ベースのアプローチを使用できます。

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

Web ワーカーを使用

Web ワーカーは、反復時に別のソリューションを提供します。コードには DOM アクセスは必要ありません。時間のかかるコードは別のスクリプト ファイルに移動され、ワー​​カー スレッドで実行されます。完了すると、ワーカーはイベント処理を妨げることなく、結果をメインスレッドにポストできます。

以上がUI スレッドをブロックせずに大きな配列を反復するにはどうすればよいでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。