處理大型陣列時如何確保 UI 響應靈敏？-js教程-PHP中文網

處理大型陣列時如何確保 UI 響應靈敏？

Mary-Kate Olsen

發布： 2024-11-04 10:59:30

原創

834 人瀏覽過

How to Ensure a Responsive UI When Processing Large Arrays?

無回應UI 操作的非同步迭代

當迭代大型陣列並執行可能妨礙使用者互動的冗長操作時，採用非同步迭代變變得至關重要保持使用者介面響應能力的策略。本指南探討了兩種實現此目的的方法，無論有沒有 Web Worker。

非 WebWorker 解決方案

對於涉及 DOM 操作或其他狀態相關任務的操作，使用網路工作者是不切實際的。建議的方法是將工作分解為更小的區塊並使用計時器非同步執行它們。這允許瀏覽器處理事件並更新每個區塊之間的 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>

登入後複製

為了更好地控制非同步執行，您可以指定每個區塊的最大時間限制，而不是固定區塊size:

<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 Worker 來執行操作在一個單獨的執行緒中。 Web Worker 獨立運作並透過 postMessage 將結果傳達回主執行緒。這種方法可確保 UI 執行緒在後台進行大量計算時保持回應。但是，請注意，您需要將 Web Worker 中執行的程式碼移至單獨的腳本檔案中。

以上是處理大型陣列時如何確保 UI 響應靈敏？的詳細內容。更多資訊請關注PHP中文網其他相關文章！