大規模な配列を処理するときに UI の応答性を確保するにはどうすればよいですか?

応答しない UI 操作の非同期反復

大規模な配列を反復処理し、ユーザー操作を妨げる可能性のある長時間の操作を実行する場合、次のことを採用することが重要になります。ユーザー インターフェイスの応答性を維持する戦略。このガイドでは、Web ワーカーを使用する場合と使用しない場合の両方で、これを達成するための 2 つのアプローチを説明します。

非 WebWorker ソリューション

DOM 操作やその他の状態依存タスクを含む操作の場合、 Web ワーカーを使用するのは非現実的です。推奨されるアプローチは、作業を小さなチャンクに分割し、タイマーを使用して非同期に実行することです。これにより、ブラウザーは各チャンク間でイベントを処理し、UI を更新できるようになり、ユーザー入力と表示更新の中断を防ぎます。

以下のコードは、この手法を示しています。

<code class="javascript">function processLargeArray(array) {
    // Process 100 items per chunk
    var chunkSize = 100;
    var index = 0;
    function doChunk() {
        for (var i = 0; i < chunkSize && index < array.length; i++) {
            // Process array[index] here
            ++index;
        }
        if (index < array.length) {
            // Schedule next async chunk
            setTimeout(doChunk, 1);
        }
    }    
    doChunk();    
}

processLargeArray(veryLargeArray);</code>

上記のコードを、forEach() メソッドと同様の、コールバックを受け入れる汎用関数に追加します。

<code class="javascript">function processLargeArrayAsync(array, fn, chunkSize, context) {
    context = context || window;
    chunkSize = chunkSize || 100;
    var index = 0;
    function doChunk() {
        for (var i = 0; i < chunkSize && index < array.length; i++) {
            // Callback called with args (value, index, array)
            fn.call(context, array[index], index, array);
            ++index;
        }
        if (index < array.length) {
            // Schedule next async chunk
            setTimeout(doChunk, 1);
        }
    }    
    doChunk();    
}

processLargeArrayAsync(veryLargeArray, myCallback, 100);</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) {
            // Callback called with args (value, index, array)
            fn.call(context, array[index], index, array);
            ++index;
        }
        if (index < array.length) {
            // Schedule next async chunk
            setTimeout(doChunk, 1);
        }
    }    
    doChunk();    
}

processLargeArrayAsync(veryLargeArray, myCallback);</code>

WebWorker ソリューション

ループ コードが DOM または他のブラウザー状態と対話しない場合は、Web ワーカーを活用して操作を実行できます。別のスレッドで。 Web ワーカーは独立して実行され、postMessage 経由で結果をメイン スレッドに送り返します。このアプローチにより、負荷の高い計算がバックグラウンドで実行されている間も、UI スレッドの応答性が維持されます。ただし、Web ワーカーで実行されるコードを別のスクリプト ファイルに移動する必要があることに注意してください。

以上が大規模な配列を処理するときに UI の応答性を確保するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。