Comment garantir une interface utilisateur réactive lors du traitement de grands tableaux ?

Itération asynchrone pour les opérations d'interface utilisateur qui ne répondent pas

Lors de l'itération sur de grands tableaux et de l'exécution d'opérations longues qui peuvent empêcher l'interaction de l'utilisateur, il devient crucial d'adopter stratégies qui maintiennent la réactivité de l’interface utilisateur. Ce guide explore deux approches pour y parvenir, avec et sans Web Workers.

Solution non-WebWorker

Pour les opérations impliquant une manipulation du DOM ou d'autres tâches dépendantes de l'état, l'utilisation de Web Workers n'est pas pratique. L'approche recommandée consiste à diviser le travail en morceaux plus petits et à les exécuter de manière asynchrone à l'aide d'un minuteur. Cela permet au navigateur de traiter les événements et de mettre à jour l'interface utilisateur entre chaque morceau, évitant ainsi les interruptions dans la saisie de l'utilisateur et l'affichage des mises à jour.

Le code ci-dessous illustre cette technique :

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

Vous pouvez étendre la code ci-dessus vers une fonction générique qui accepte un rappel, similaire à la méthode 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>

Pour un contrôle plus précis de l'exécution asynchrone, vous pouvez spécifier une limite de temps maximale par morceau au lieu d'un morceau fixe 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>

Solution WebWorker

Si votre code de boucle n'interagit pas avec le DOM ou un autre état du navigateur, vous pouvez exploiter les Web Workers pour exécuter les opérations dans un fil séparé. Les travailleurs Web s'exécutent de manière indépendante et communiquent les résultats au thread principal via postMessage. Cette approche garantit que le thread de l'interface utilisateur reste réactif pendant que les calculs lourds ont lieu en arrière-plan. Cependant, notez que vous devrez déplacer le code qui s'exécute dans le Web Worker vers un fichier de script distinct.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!