gacor: Déplacez le travail gourmand en CPU du thread principal avec un Web Worker

Un long calcul sur le fil principal peut bloquer les clics, la saisie et la peinture. Un Web Worker exécute JavaScript dans un contexte global distinct et communique avec la page par messages.

const worker = new Worker(
  new URL("./search.worker.js", import.meta.url),
  { type: "module" },
);

worker.addEventListener("message", ({ data }) => {
  renderResults(data);
});
worker.postMessage({ query, records });

// search.worker.js
self.addEventListener("message", ({ data }) => {
  const results = expensiveSearch(data.records, data.query);
  self.postMessage(results);
});

Gardez la limite du message délibérée

• Envoyez les plus petites données dont le travailleur a besoin ; le clonage structuré peut lui-même être coûteux pour les graphes d'objets volumineux.
• Utilisez des tampons transférables pour les données binaires lorsque la propriété peut être transférée au travailleur.
• Gérez les erreurs de travail et mettez-y fin lorsque l’interface propriétaire est définitivement supprimée.

Les travailleurs ne peuvent pas manipuler directement la page DOM. Renvoyez les résultats au thread principal et mettez à jour l'interface là-bas.