¿Cómo crear un hilo de Web Worker en JavaScript…

Crear un hilo de Web Worker en JavaScript se puede hacer usando el constructor Worker.

// Crear un nuevo Web Worker, pasando la ruta al archivo JS,
// que se ejecutará en un hilo separado.
const worker = new Worker('worker.js');

En el archivo worker.js (o cualquier otro especificado al crear el worker) se ejecutará el código en un hilo separado.

// worker.js

// Procesamiento de mensajes enviados desde el hilo principal
self.onmessage = function(event) {
  const receivedData = event.data;
  console.log('Mensaje recibido del hilo principal:', receivedData);

  // Enviar mensaje de vuelta al hilo principal
  const responseData = { message: '¡Hola desde Worker!', data: receivedData };
  self.postMessage(responseData);
};

// Opcionalmente, se puede agregar manejo de errores
self.onerror = function(error) {
  console.error('Error en Worker:', error);
};

En el hilo principal (donde se creó el worker), se puede interactuar con el worker:

// main.js

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

// Enviar mensaje al Web Worker
worker.postMessage({ command: 'start', payload: 'some data' });

// Procesar mensajes recibidos del Web Worker
worker.onmessage = function(event) {
  const receivedData = event.data;
  console.log('Mensaje recibido de Worker:', receivedData);
};

// Manejar errores en el Web Worker
worker.onerror = function(error) {
  console.error('Error en Worker en el hilo principal:', error);
};

// Finalizar el Web Worker (opcional)
// worker.terminate();

Puntos clave:

Comunicación: El intercambio de datos entre el hilo principal y el worker se realiza mediante mensajes usando los métodos postMessage() y el manejador onmessage.
Restricciones: Los workers no tienen acceso al DOM, al objeto window, ni a otros objetos globales del navegador. Tienen acceso limitado a objetos como navigator, location, XMLHttpRequest, setTimeout, setInterval, fetch, WebSockets y otros.
Aislamiento: El código en el worker se ejecuta en un hilo separado, lo que previene bloqueos en el hilo principal y mejora el rendimiento, especialmente al realizar cálculos intensivos en recursos.

¿Cómo crear un hilo de Web Worker en JavaScript?