Introducción a Web Workers en JavaScript

Qué son los web workers. Un ejemplo práctico para comprender su funcionamiento.

Los Web Workers permiten ejecutar scripts en segundo plano sin bloquear la interfaz de usuario, lo que los hace útiles para tareas que requieren procesamiento intensivo. Desde su introducción en HTML5, han sido adoptados por la mayoría de los navegadores modernos. Son útiles en situaciones donde una página necesita realizar operaciones costosas sin afectar la experiencia del usuario.

A continuación, veremos cómo se pueden implementar con un ejemplo práctico.

Implementación de un Web Worker

Para probar este ejemplo, necesitamos un archivo HTML que cargue el script principal main.js. Este script luego ejecutará un Web Worker que estará en otro archivo worker.js.

En el archivo index.html cargamos el script principal:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ejemplo de Web Worker</title>
</head>
<body>
  <h1>Ejemplo de Web Worker</h1>
  <script src="main.js"></script>
</body>
</html>

A partir de aquí, el script creará y comunicará un worker en segundo plano.

Código del Web Worker y el hilo principal

Ahora veamos cómo interactúan los archivos main.js (hilo principal) y worker.js (worker en segundo plano).

// Verifica si el navegador soporta Web Workers
if (window.Worker) {
  // Crea una instancia del Web Worker a partir del archivo 'worker.js'
  const worker = new Worker('worker.js');

  // Envía un mensaje al worker
  worker.postMessage('Hola, Worker');

  // Escucha los mensajes enviados por el worker
  worker.onmessage = (event) => {
    console.log('Mensaje recibido del worker:', event.data);
  };

  // Controla posibles errores en el worker
  worker.onerror = (error) => {
    console.error('Error en el worker:', error);
  };
} else {
  console.log('El navegador no soporta Web Workers.');
}

¿Qué hace postMessage?
El método postMessage permite enviar datos entre el hilo principal y el worker. Soporta cualquier dato estructurado (números, cadenas, objetos e incluso ArrayBuffer). Esto es clave para comunicar información sin bloquear el proceso principal.

// Escucha el mensaje del hilo principal
onmessage = (event) => {
  const mensaje = event.data;
  console.log('Mensaje recibido en el worker:', mensaje);

  // Envía una respuesta al hilo principal
  postMessage('Hola desde el worker');
};

En este archivo:

Se recibe el mensaje desde el hilo principal mediante onmessage.
Se extraen los datos del evento (event.data).
Se responde de vuelta con postMessage.

Este flujo permite procesar datos en segundo plano y devolver resultados sin afectar la interfaz.

Conclusión

El uso de Web Workers permite realizar tareas en paralelo sin bloquear la interacción del usuario, ideal para mejorar el rendimiento en aplicaciones web dinámicas.

Es común usar web workers en los siguientes casos:

Cargar y procesar scripts de terceros, como análisis de datos o integración con APIs.
Aplicaciones web con alta carga, por ejemplo, editores de imágenes en línea, simulaciones o videojuegos.
Procesamiento de datos en segundo plano, como cálculos intensivos o manipulación de grandes volúmenes de información.

Si bien los Web Workers no pueden acceder al DOM directamente, su capacidad para ejecutar código en un hilo separado los convierte en una herramienta útil para mejorar la fluidez, el rendimieto y la experiencia del usuario en aplicaciones exigentes.