Comment pouvez-vous parcourir de grands tableaux sans bloquer le thread de l'interface utilisateur ?

Stratégies d'itération de tableau non bloquantes

Lors d'une itération sur de grands tableaux, il est crucial d'éviter de bloquer le thread de l'interface utilisateur et de compromettre l'expérience utilisateur. Cet article explore diverses stratégies pour réaliser une itération non bloquante sans utiliser de Web Workers et avec l'utilisation de Web Workers.

Sans Web Workers

Pour le code qui doit interagir avec le DOM, une solution courante consiste à diviser l'itération en morceaux plus petits et à les traiter de manière asynchrone à l'aide de minuteries. Cela permet au navigateur de traiter d'autres événements, gardant l'interface utilisateur réactive.

<code class="javascript">function processLargeArray(array) {
  // Chunk size for processing
  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>

Vous pouvez également définir une fonction plus générique qui accepte une fonction de rappel pour traiter chaque élément :

<code class="javascript">function processLargeArrayAsync(array, fn, chunk, context) {
  context = context || window;
  chunk = chunk || 100;
  var index = 0;

  function doChunk() {
    var cnt = chunk;
    while (cnt-- && index < array.length) {
      // Call the callback 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>

Pour éviter de deviner la taille optimale des morceaux, vous pouvez utiliser une approche basée sur les intervalles :

<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) {
      // Call the callback 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 les Web Workers

Les Web Workers proposent une autre solution lorsque l'itération le code n'a pas besoin d'un accès au DOM. Le code fastidieux est déplacé vers un fichier de script distinct et s'exécute dans un thread de travail. Une fois terminé, le travailleur peut publier les résultats dans le thread principal sans entraver le traitement des événements.

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!