Web Workers: Hilos en el Navegador

JavaScript corre en un solo hilo (thread). Si ejecutas un cálculo pesado — procesar una imagen, ordenar 1 millón de registros, encriptar datos — la interfaz se congela porque ese único hilo está ocupado. Web Workers resuelven esto: crean hilos secundarios que ejecutan código en paralelo sin bloquear la UI.

Un Worker es un archivo JS separado que corre en su propio hilo. Se comunica con el hilo principal mediante mensajes: postMessage() envía datos y onmessage los recibe. Los Workers NO tienen acceso al DOM (no pueden tocar la interfaz), pero pueden hacer fetch, cálculos matemáticos, procesamiento de datos, y más. Cuando terminan, envían el resultado de vuelta al hilo principal.

// --- main.js (hilo principal) ---
const worker = new Worker("worker.js");

// Enviar tarea al worker
worker.postMessage({
  tipo: "ordenar",
  datos: [5, 3, 8, 1, 9, 2, 7, 4, 6]
});

// Recibir resultado del worker
worker.onmessage = (evento) => {
  console.log("Ordenado:", evento.data);
  // La UI nunca se congeló
};

worker.onerror = (error) => {
  console.error("Worker falló:", error.message);
};

// Terminar worker cuando no se necesite
// worker.terminate();

// --- worker.js (hilo secundario) ---
self.onmessage = (evento) => {
  const { tipo, datos } = evento.data;

  if (tipo === "ordenar") {
    // Operación pesada — no bloquea la UI
    const resultado = datos.sort((a, b) => a - b);

    // Enviar resultado de vuelta
    self.postMessage(resultado);
  }
};

// El worker NO puede acceder a:
// document, window, alert, DOM
// Solo puede usar: fetch, setTimeout,
// indexedDB, WebSockets, Math, JSON

Casos de uso reales de Web Workers: procesamiento de imágenes/video (filtros, compresión), cálculos científicos o financieros, parsing de archivos CSV/JSON grandes, encriptación/hashing, y búsqueda/ordenamiento en grandes datasets. Librerías como Comlink simplifican la comunicación haciendo que el worker parezca una función async normal.