Chuleta de Web Workers en JavaScript

Los Web Workers proporcionan una forma sencilla de ejecutar scripts en hilos en segundo plano sin interferir con la interfaz de usuario.

Ejecución en segundo plano

Hilo principal del cliente

const worker = new Worker('worker.js');

worker.onmessage = function (event) {
  console.log('Recibido del worker:', event.data);
};

worker.postMessage('¡hola desde el hilo principal!');

Los mensajes pueden ser de cualquier tipo de datos admitido por el algoritmo de clonación estructurada (objetos, arrays, cadenas, números, blobs, typed arrays).

Hilo del Worker

// Dentro de worker.js
self.onmessage = function (event) {
  console.log('Recibido en el worker:', event.data);
  self.postMessage({ msg: 'respuesta del worker' });
};

Estructura de MessageEvent

bubbles: false
cancelBubble: false
cancelable: false
clipboardData: undefined
currentTarget: Worker
data: "Hello"             // Carga útil transferida
defaultPrevented: false
eventPhase: 0
lastEventId: ""
origin: ""
ports: []
returnValue: true
source: null
srcElement: Worker
target: Worker
timeStamp: 1344821022383
type: "message"

Estos campos describen las propiedades disponibles en el objeto MessageEvent dentro de onmessage.