UI をブロックせずに JavaScript で大きな配列を反復処理する方法

UI をブロックせずに大規模な配列を非同期的に反復する

はじめに

JavaScript で大規模な配列を反復することは、特に難しい場合があります。 UI の応答性を維持する必要がある場合。 UI をブロックすると、ユーザー エクスペリエンスが低下する可能性があります。この記事では、UI を中断せずに大規模な配列を反復処理するためのさまざまなアプローチについて説明します。

Web ワーカーを使用しない

DOM にアクセスする必要があるコードや DOM と頻繁にやり取りするコードを操作する場合他のアプリの状態では、Web Workers は使用できません。実際的な解決策は、反復をより小さなチャンクに分割し、タイマーで実行することです。これにより、ブラウザは UI の応答性を維持しながら、チャンク間で他のイベントを処理できるようになります。

次のコードは、このアプローチを示しています。

このコードは、さらに一般化して、次のようなコールバック関数を呼び出すことができます。カスタマイズ可能なチャンク サイズの Array.forEach():

Web ワーカーを使用

コードが DOM にアクセスする必要がない場合、Web ワーカーは活用されている。 Web ワーカーはメイン スレッドから独立して実行されるため、長時間実行タスクを非同期で実行できます。

まず、Web ワーカーで実行されるコードを別のスクリプトに分離する必要があります。次に、次の手順を実行できます:

1. 新しい Web Worker オブジェクトを作成し、スクリプトの URL を指定します:

2. Web ワーカーがタスクを完了したときに、Web ワーカーから受信したメッセージ イベントを処理します:

3. 処理のためにデータを Web ワーカーに送信します:

以上がUI をブロックせずに JavaScript で大きな配列を反復処理する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。