Web Workers: Definición, Casos Uso, Ejemplos Performance

¿Qué es un Web Worker?

Un Web Worker es un script JavaScript que corre en un thread separado del main UI thread, en background. Al offloadear trabajo expensive (procesamiento imagen, parsing, criptografía, computaciones complex) a un Web Worker, mantienes el main thread libre para manejar input usuario, animaciones y rendering — preservando responsiveness y mejorando Core Web Vitals como INP.

Web Workers fueron introducidos en 2009 con HTML5.

Tipos de Web Workers

Ejemplo Web Worker básico

// main.js
const worker = new Worker('worker.js');
worker.postMessage({ task: 'compute', data: largeArray });
worker.addEventListener('message', (event) => {
  console.log('Result:', event.data);
});

// worker.js
self.addEventListener('message', (event) => {
  if (event.data.task === 'compute') {
    const result = expensiveCompute(event.data.data);
    self.postMessage(result);
  }
});

Qué pueden hacer los Web Workers

• Computación pesada
• Parsing JSON/XML/CSV grandes
• Background sync
• Correr módulos WebAssembly
• Usar IndexedDB, fetch, WebSocket
• La mayoría de APIs JS excepto DOM

Qué NO pueden hacer los Web Workers

• Acceder DOM
• Usar window, document
• Usar XHR síncrono
• Acceder localStorage

Cuándo usar un Web Worker

• Computación long-running.
• Procesamiento datos real-time.
• Criptografía.
• Procesamiento image/PDF.
• Background fetching/syncing.
• Módulos WebAssembly.

Service Worker

Los Service Workers actúan como proxy entre browser y red.

navigator.serviceWorker.register('/sw.js');

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1').then((cache) => cache.addAll(['/', '/styles.css']))
  );
});

Impacto performance Web Worker

Sin Workers, el trabajo JS pesado bloquea main thread, causando bad INP, scrolling janky, UI congelada.

Mejores prácticas Web Worker

• Usar para tasks long.
• Minimizar overhead message passing.
• Usar Transferable Objects.
• Worker pool para paralelismo.
• Terminar cuando done.
• Manejar errores.
• Bundlear código worker.

Pitfalls comunes

• Enviar datos huge en messages.
• Intentar acceder DOM.
• Olvidar terminar.
• Over-engineering.
• Costo startup worker.
• No manejar errores worker.
• Usar APIs sync.

Librerías Web Worker

FAQ: Web Workers

¿Web Worker vs Service Worker?

Web Worker: JS background general. Service Worker: proxy red.

¿Pueden Web Workers acceder DOM?

No.

¿Son lentos al startup los Web Workers?

~10-50ms para spawnear.

¿Cómo comparto state entre workers?

SharedArrayBuffer.

¿Puedo correr packages npm en Web Worker?

Sí — vía bundler.

¿Qué es un Worklet?

Un worker especializado lightweight para APIs low-level.

¿Son necesarios Web Workers para mi app?

Solo si tienes trabajo CPU-bound bloqueando main thread.

Testea performance Web Worker con LoadFocus

LoadFocus corre auditorías Lighthouse desde 25+ regiones. Regístrate en loadfocus.com/signup.