gacor: Saque el trabajo pesado de la CPU del hilo principal con un Web Worker

Un cálculo largo en el hilo principal puede bloquear los clics, la escritura y la pintura. Un Web Worker ejecuta JavaScript en un contexto global separado y se comunica con la página mediante mensajes.

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);
});

Mantenga el límite del mensaje deliberado

• Enviar los datos más pequeños que el trabajador necesita; La clonación estructurada puede resultar costosa en el caso de gráficos de objetos grandes.
• Utilice buffers transferibles para datos binarios cuando la propiedad pueda pasar al trabajador.
• Maneje los errores de los trabajadores y finalícelos cuando la interfaz propietaria se elimine permanentemente.

Los trabajadores no pueden manipular la página DOM directamente. Envíe los resultados al hilo principal y actualice la interfaz allí.