¿Qué son los Web Workers y para qué sirven?

Los Web Workers permiten realizar operaciones intensivas en recursos en hilos de fondo, sin bloquear el hilo principal de ejecución de JavaScript, que se encarga de renderizar la interfaz de usuario. Esto previene que la página se congele y mejora la capacidad de respuesta de la aplicación, especialmente al trabajar con grandes volúmenes de datos, cálculos o solicitudes de red.

Tipos principales de Worker:

• Worker dedicado: Se crea con new Worker('worker.js'). Solo trabaja con la página que lo creó y se gestiona directamente desde el script de esa página.
• Worker compartido: Se crea con new SharedWorker('worker.js'). Puede ser accesible desde varios scripts en diferentes ventanas o pestañas del mismo origen.
• Service Worker: Funciona como un proxy entre el navegador y la red. Se usa para cachear recursos, trabajar de forma autónoma y para implementar notificaciones push.

La comunicación entre el hilo principal y el Worker se realiza de forma asíncrona mediante mensajes:

• postMessage(): para enviar datos de un hilo a otro.
• Manejador de evento onmessage: para recibir datos en otro hilo.

Restricciones de Web Workers:

• No tienen acceso directo al DOM.
• No tienen acceso a los objetos window y document.
• No tienen acceso a algunas variables y funciones globales del hilo principal.

Ejemplo de uso de Worker dedicado:

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

worker.addEventListener('message', (event) => {
  console.log('Mensaje recibido del Worker:', event.data);
});

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

// worker.js
self.addEventListener('message', (event) => {
  console.log('Mensaje recibido del hilo principal:', event.data);
  self.postMessage('¡Hola desde el Worker!');
});