Comment obtenir des performances d'interface utilisateur réactives avec une itération asynchrone ?

Itération asynchrone pour des performances d'interface utilisateur réactives

Pour éviter de bloquer l'interface utilisateur lors de tâches itératives, en particulier avec de grands tableaux et des appels d'API, il existe deux approches principales : utiliser des techniques asynchrones sans Web Workers et incorporer des Web Workers.

Itération asynchrone sans Web Workers

Si le code ne nécessite pas d'interaction avec l'interface utilisateur, vous pouvez exploitez setTimeout() pour une itération asynchrone. Cela permet de traiter des morceaux du tableau tout en donnant au navigateur la possibilité de gérer d'autres événements.

<code class="javascript">function processLargeArray(array) {
  var chunk = 100;
  var index = 0;
  function doChunk() {
    var cnt = chunk;
    while (cnt-- && index < array.length) {
      // Process array[index]
      ++index;
    }
    if (index < array.length) {
      setTimeout(doChunk, 1); // Set Timeout for async iteration
    }
  }
  doChunk();
}</code>

Itération asynchrone à l'aide de Web Workers

Les Web Workers fournissent un environnement isolé pour les calculs et la communication via des messages postaux. Ils sont idéaux pour les tâches non liées à l'interface utilisateur.

Création d'un Web Worker :

<code class="javascript">// Create a Worker script file
// worker.js:
self.addEventListener('message', function(e) {
  // Perform computations
  var result = computeResult(e.data);
  self.postMessage(result);
});

// Create a Worker
var worker = new Worker('worker.js');</code>

Communication avec le Worker :

<code class="javascript">worker.onmessage = function(e) {
  // Handle post message from worker
  // Update UI or process results
};
worker.postMessage(data); // Send data to worker</code>

Considérations

• Sans Web Workers :

  • Peut être plus efficace pour les tâches qui nécessitent une interaction fréquente avec l'interface utilisateur.
  • Peut être difficile d'équilibrer réactivité et performances.

• Avec Web Workers :

  • Convient aux tâches de longue durée sans rapport avec l'interface utilisateur.
  • Fournit une isolation et de meilleures performances globales.
  • Nécessite la séparation du code dans 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!