Web Workers

Introducción a Web Workers

Los Web Workers permiten ejecutar JavaScript en un hilo separado, evitando bloquear la UI. Son ideales para cálculos pesados, parsing y tareas de datos.

Cuándo usar Web Workers

• Cálculos intensivos de CPU
• Procesamiento de grandes datasets
• Parsing de archivos grandes (CSV, JSON)
• Compresión/Encriptación
• Operaciones de imagen o video

Crear un Worker

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

worker.postMessage({ numbers: [1, 2, 3, 4, 5] });

worker.onmessage = (event) => {
  console.log('Result from worker:', event.data);
};

// worker.js
self.onmessage = (event) => {
  const { numbers } = event.data;
  const sum = numbers.reduce((acc, n) => acc + n, 0);
  self.postMessage(sum);
};

Comunicación

Los workers se comunican con el hilo principal mediante mensajes:

// main.js
worker.postMessage({ type: 'PROCESS', payload: largeData });

// worker.js
self.onmessage = (event) => {
  if (event.data.type === 'PROCESS') {
    const result = heavyComputation(event.data.payload);
    self.postMessage({ type: 'RESULT', payload: result });
  }
};

Transferables

Para datos grandes, usa transferables para evitar copiar memoria:

// Transfer ArrayBuffer ownership
const buffer = new ArrayBuffer(1024 * 1024);
worker.postMessage(buffer, [buffer]);
console.log(buffer.byteLength); // 0 - transferred to worker

Ejemplo: procesamiento pesado

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

function calculatePrimes() {
  worker.postMessage({ n: 100000 });
}

worker.onmessage = (e) => {
  console.log('Primes:', e.data);
};

// worker.js
self.onmessage = (e) => {
  const { n } = e.data;
  const primes = [];
  
  for (let i = 2; i <= n; i++) {
    let isPrime = true;
    for (let j = 2; j <= Math.sqrt(i); j++) {
      if (i % j === 0) {
        isPrime = false;
        break;
      }
    }
    if (isPrime) primes.push(i);
  }
  
  self.postMessage(primes);
};