Comment itérer de grands tableaux en JavaScript sans bloquer l'interface utilisateur ?

Itérer de grands tableaux de manière asynchrone sans bloquer l'interface utilisateur

Introduction

Itérer sur de grands tableaux en JavaScript peut être difficile, en particulier lorsque l’interface utilisateur doit rester réactive. Le blocage de l'interface utilisateur peut entraîner une mauvaise expérience utilisateur. Cet article explore différentes approches pour itérer sur de grands tableaux sans interrompre l'interface utilisateur.

Sans Web Workers

Lorsque vous travaillez avec du code qui doit accéder au DOM ou qui interagit fortement avec autre état de l'application, les Web Workers ne peuvent pas être utilisés. Une solution pratique consiste à diviser l’itération en morceaux plus petits et à les exécuter selon une minuterie. Cela permet au navigateur de traiter d'autres événements entre les morceaux, en maintenant la réactivité de l'interface utilisateur.

Le code suivant illustre cette approche :

<code class="js">function processLargeArray(array) {
  // Customizable chunk size
  var chunk = 100;
  var index = 0;

  function doChunk() {
    var cnt = chunk;
    while (cnt-- && index < array.length) {
      // Process array[index] here
      ++index;
    }

    if (index < array.length) {
      // Set timeout for async iteration
      setTimeout(doChunk, 1);
    }
  }

  doChunk();
}</code>

Ce code peut être généralisé davantage pour appeler une fonction de rappel similaire à Array.forEach() avec une taille de morceau personnalisable :

<code class="js">function processLargeArrayAsync(array, fn, chunk, context) {
  // Customizable chunk size
  chunk = chunk || 100;
  var index = 0;

  function doChunk() {
    var cnt = chunk;
    while (cnt-- && index < array.length) {
      // Callback called with args (value, index, array)
      fn.call(context, array[index], index, array);
      ++index;
    }

    if (index < array.length) {
      // Set timeout for async iteration
      setTimeout(doChunk, 1);
    }
  }

  doChunk();
}</code>

Avec Web Workers

Si le code n'a pas besoin d'accéder au DOM, un Web Worker peut être utilisé. Un Web Worker s'exécute indépendamment du thread principal, ce qui lui permet d'exécuter des tâches de longue durée de manière asynchrone.

Tout d'abord, le code qui s'exécutera dans le Web Worker doit être isolé dans un script distinct. Ensuite, les étapes suivantes peuvent être suivies :

1. Créez un nouvel objet Web Worker et spécifiez l'URL du script :

   <code class="js">var webWorker = new Worker('worker.js');</code>

2. Gérer l'événement de message reçu du Web Worker lorsqu'il a terminé sa tâche :

   <code class="js">webWorker.onmessage = function(e) {
     // Handle the result
   };</code>

3. Envoyer les données au Web Worker pour traitement :

   <code class="js">webWorker.postMessage({ data: array });</code>

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!