Wie kann eine reaktionsfähige Benutzeroberfläche bei der Verarbeitung großer Arrays sichergestellt werden?

Asynchrone Iteration für nicht reagierende UI-Vorgänge

Bei der Iteration über große Arrays und der Durchführung langwieriger Vorgänge, die die Benutzerinteraktion behindern können, ist die Einführung von entscheidender Bedeutung Strategien, die die Reaktionsfähigkeit der Benutzeroberfläche aufrechterhalten. In diesem Leitfaden werden zwei Ansätze untersucht, um dies zu erreichen, sowohl mit als auch ohne Web-Worker.

Nicht-WebWorker-Lösung

Für Vorgänge mit DOM-Manipulation oder anderen zustandsabhängigen Aufgaben: Der Einsatz von Web-Workern ist unpraktisch. Der empfohlene Ansatz besteht darin, die Arbeit in kleinere Abschnitte zu unterteilen und diese mithilfe eines Timers asynchron auszuführen. Dadurch kann der Browser Ereignisse verarbeiten und die Benutzeroberfläche zwischen den einzelnen Blöcken aktualisieren, wodurch Unterbrechungen bei Benutzereingaben und Anzeigeaktualisierungen vermieden werden.

Der folgende Code demonstriert diese Technik:

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

Sie können die erweitern Fügen Sie den obigen Code einer generischen Funktion hinzu, die einen Rückruf akzeptiert, ähnlich der forEach()-Methode:

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

Für eine genauere Kontrolle über die asynchrone Ausführung können Sie ein maximales Zeitlimit pro Block anstelle eines festen Blocks angeben Größe:

<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-Lösung

Wenn Ihr Schleifencode nicht mit dem DOM oder einem anderen Browserstatus interagiert, können Sie Web-Worker nutzen, um die Vorgänge auszuführen in einem separaten Thread. Web-Worker laufen unabhängig und übermitteln die Ergebnisse über postMessage an den Haupt-Thread. Dieser Ansatz stellt sicher, dass der UI-Thread reaktionsfähig bleibt, während die umfangreichen Berechnungen im Hintergrund stattfinden. Beachten Sie jedoch, dass Sie den Code, der im Web Worker ausgeführt wird, in eine separate Skriptdatei verschieben müssen.

Das obige ist der detaillierte Inhalt vonWie kann eine reaktionsfähige Benutzeroberfläche bei der Verarbeitung großer Arrays sichergestellt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!