Event Loop de JavaScript

Visión General

El event loop de JavaScript es el corazón de la programación asíncrona en navegadores y Node.js. Orquesta la ejecución del código, recopila y procesa eventos, y ejecuta subtareas en cola. Comprender cómo interactúan el call stack, la cola de tareas y la cola de microtareas es esencial para escribir aplicaciones performantes y no bloqueantes.

Cuándo Usar

Usa este recurso cuando:

• Depuras errores asíncronos misteriosos o condiciones de carrera — consulta prevención de race conditions para los patrones que las causan.
• Optimizas la responsividad de la UI en aplicaciones frontend — consulta SPA code splitting para el lado del bundle en rendimiento.
• Eliges entre setTimeout, Promise y queueMicrotask para agendar trabajo.
• Entiendes por qué el orden del código no siempre coincide con el orden de ejecución.

Cuándo Evitar

• Trabajo CPU-bound: el event loop es single-threaded — mejor Web Workers.
• Procesamiento de audio/video en tiempo real: usa Web Audio API o WebRTC, que corren en threads separados.
• Paralelismo server-side: los worker threads de Node.js o child processes son mejores para tareas CPU-bound en el servidor.

Solución

Visualizando el Event Loop

console.log('1. Inicio del script');

setTimeout(() => {
  console.log('2. setTimeout (macrotarea)');
}, 0);

Promise.resolve().then(() => {
  console.log('3. Promise (microtarea)');
});

queueMicrotask(() => {
  console.log('4. queueMicrotask');
});

console.log('5. Fin del script');

// Orden de salida:
// 1. Inicio del script
// 5. Fin del script
// 3. Promise (microtarea)
// 4. queueMicrotask
// 2. setTimeout (macrotarea)

Manejando Tareas de Larga Duración

function procesarArrayGrande(arr, chunkSize = 1000) {
  let index = 0;

  function procesarChunk() {
    const chunk = arr.slice(index, index + chunkSize);
    chunk.forEach(item => computacionPesada(item));
    index += chunkSize;

    if (index < arr.length) {
      setTimeout(procesarChunk, 0); // Ceder control al event loop
    }
  }

  procesarChunk();
}

Async/Await y el Event Loop

async function fetchUserData(userId) {
  // Await cede control al event loop
  const response = await fetch(`/api/users/${userId}`);
  const data = await response.json();
  return data;
}

// Múltiples awaits corren secuencialmente
async function fetchSequential() {
  const a = await fetch('/api/a'); // espera a
  const b = await fetch('/api/b'); // espera b
  // Tiempo total: time(a) + time(b)
}

// Promise.all corre concurrentemente
async function fetchParallel() {
  const [a, b] = await Promise.all([
    fetch('/api/a'),
    fetch('/api/b'),
  ]);
  // Tiempo total: max(time(a), time(b))
}

Web Workers para Tareas CPU-Intensivas

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

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

// compute.js
self.onmessage = (e) => {
  const result = heavyComputation(e.data);
  self.postMessage(result);
};

Los Web Workers corren en un thread separado. No bloquean el event loop ni la UI.

Scheduler API (Navegadores Modernos)

// Cede el main thread con scheduler.yield()
async function processChunks(items) {
  for (const item of items) {
    process(item);
    await scheduler.yield(); // Deja que el navegador pinte
  }
}

// Agenda tareas con prioridades
scheduler.postTask(() => {
  // tarea visible para el usuario
}, { priority: 'user-visible' });

scheduler.postTask(() => {
  // tarea en background
}, { priority: 'background' });

Node.js: setImmediate vs process.nextTick

// process.nextTick corre antes que cualquier I/O o timer
process.nextTick(() => console.log('1. nextTick'));

// setImmediate corre después de eventos I/O
setImmediate(() => console.log('3. setImmediate'));

// setTimeout corre después de un delay mínimo
setTimeout(() => console.log('2. setTimeout'), 0);

// Orden: 1. nextTick, 2. setTimeout, 3. setImmediate
// (el orden setTimeout vs setImmediate no está garantizado en la práctica)

Explicación

El event loop opera en fases:

1. Call Stack: ejecuta código síncrono. Cuando está vacío, el event loop revisa las colas.
2. Cola de Microtareas: procesa callbacks de Promise, queueMicrotask y MutationObserver. Se vacía completamente antes de la siguiente macrotarea.
3. Cola de Macrotareas: procesa setTimeout, setInterval, setImmediate (Node.js) y eventos de I/O — una tarea por iteración del loop.
4. Fase de Renderizado: los navegadores pueden actualizar el DOM y repintar si hay tiempo.

Regla crítica: todas las microtareas se ejecutan antes de la siguiente macrotarea. Esto puede bloquear la cola de macrotareas si las microtareas encolan más microtareas recursivamente.

Variantes

Runtime	API Macrotarea	API Microtarea	Notas
Navegador	setTimeout, requestAnimationFrame	Promise, queueMicrotask	rAF corre antes del paint
Node.js	setTimeout, setImmediate	Promise, process.nextTick	nextTick corre antes que Promises
Deno	setTimeout	Promise, queueMicrotask	Se alinea con comportamiento de navegador
Bun	setTimeout, setImmediate	Promise, queueMicrotask	nextTick no soportado

Avanzado: Medir Event Loop Lag

// Node.js: medir delay del event loop
let lastCheck = performance.now();

setInterval(() => {
  const now = performance.now();
  const lag = now - lastCheck - 1000; // intervalo esperado 1000ms
  if (lag > 10) {
    console.warn(`Event loop lag: ${lag.toFixed(1)}ms`);
  }
  lastCheck = now;
}, 1000);

// Navegador: medir long tasks con PerformanceObserver
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.warn(`Long task: ${entry.duration.toFixed(0)}ms`);
  }
});
observer.observe({ entryTypes: ['longtask'] });

Las tareas más largas que 50ms se reportan como long tasks. Estas causan jank visible.

Avanzado: AbortController para Cancelación

const controller = new AbortController();

async function fetchWithTimeout(url, ms) {
  const timer = setTimeout(() => controller.abort(), ms);
  try {
    const res = await fetch(url, { signal: controller.signal });
    return await res.json();
  } finally {
    clearTimeout(timer);
  }
}

Cuando se aborta, fetch rechaza con un AbortError. Esta es la forma estándar de cancelar operaciones async.

Código companion: el repo companion de javascript-event-loop tiene la demo de orden, el procesamiento por chunks y el monitor de lag como scripts ejecutables con node.

Lo que funciona

• Divide trabajo pesado en chunks: usa setTimeout o requestIdleCallback para ceder control
• Prefiere microtareas para actualizaciones DOM: queueMicrotask asegura que las lecturas DOM se agrupen
• Evita encolar microtareas recursivamente: puede congelar el event loop indefinidamente
• Usa requestAnimationFrame para actualizaciones visuales: se sincroniza con el ciclo de renderizado del navegador
• Perfila con la pestaña Performance: Chrome DevTools visualiza el timing de microtareas y macrotareas

Errores Comunes

1. Asumir que setTimeout(0) es inmediato: siempre es más lento que las microtareas
2. Bloquear el hilo principal: bucles síncronos >50ms causan jank y frames perdidos
3. Olvidar nextTick en Node.js: process.nextTick corre antes que Promises, no después
4. Recursión de microtareas: Promise.resolve().then(() => Promise.resolve().then(…)) puede bloquear
5. Ignorar la fase de renderizado: colas pesadas de microtareas impiden el pintado del navegador

Solución de Problemas del Event Loop

• La UI se congela con datos grandes: un bucle síncrono está acaparando el stack. Divídelo en chunks con setTimeout o scheduler.yield(), y vigila los long tasks >50ms en la pestaña Performance.
• El timer nunca dispara cuando esperas: una cadena recursiva de microtareas está matando de hambre la cola de macrotareas. Rastrea qué encola microtareas — un .then() que resuelve otro Promise ya resuelto loopea por siempre.
• Los callbacks de setInterval se apilan: el callback tarda más que el intervalo, así que las ejecuciones se encolan sin respiro. Cambia a setTimeout recursivo para que la siguiente corrida espere a la anterior.
• Tormenta de unhandled rejections: un Promise que falla sin .catch() loguea en cada turno del event loop y puede inundar el monitoreo. Adjunta el catch temprano, o usa handlers de unhandledrejection como punto único de triaje.
• La animación tartamudea pese a código “async”: las microtareas igual corren antes del paint — una cadena pesada de await retrasa el renderizado. Mueve las actualizaciones visuales a requestAnimationFrame y el trabajo pesado a un Worker.

Notas de Producción

• Rastrea event loop lag como métrica — una curva de lag creciente bajo carga significa que el servicio no puede procesar I/O, no que es “lento”. Alerta sobre p99 de lag en servicios Node.js.
• Presupuesta long tasks en el navegador: mantén las tareas bajo 50ms para que la fase de renderizado tenga su turno; mide con entradas longtask en RUM.
• Pon kill-switch a endpoints CPU-pesados vía timeouts u offload a workers — un bucle de parseo síncrono puede matar de hambre a todas las demás requests del proceso.
• Loguea los hot paths microtask-heavy: las cadenas recursivas de Promises que matan de hambre las macrotareas aparecen como drift de timers antes que como caídas.

Puntos Clave

• El orden es: código sync → todas las microtareas → una macrotarea → render. Todo lo demás se deduce de ahí.
• await no bloquea — suspende y reencola la continuación como microtarea.
• Si la UI hace jank, una tarea es demasiado larga; si los timers se mueren de hambre, la cola de microtareas está demasiado ocupada.
• Web Workers son la respuesta para trabajo CPU-bound; el loop en sí nunca paraleliza.

Errores Comunes en Producción

• Asumir que “código async” equivale a “no bloqueante” — las microtareas también se ejecutan antes del paint.
• Medir el lag del event loop solo en localhost; el drift de timers en producción cuenta otra historia.
• Usar setInterval para polling de alta frecuencia y dejar que las callbacks se apilen bajo carga.
• Parsear JSON pesado en el main thread; JSON.parse síncrono también bloquea.
• Crear un Worker pero seguir haciendo el trabajo pesado en el main thread “de momento”.
• No testear la cola de microtareas recursiva — el starvation de macrotareas no aparece hasta producción.

Ver También

• MDN — Modelo de concurrencia y event loop: el recorrido canónico del modelo de runtime.
• Tasks, microtasks, queues and schedules: la referencia en profundidad sobre las peculiaridades del scheduling en navegador.
• WHATWG HTML spec — Event loops: el modelo de procesamiento normativo que implementan los navegadores.
• MDN — Prioritized Task Scheduling API: referencia de scheduler.yield() y postTask().
• Web performance y Core Web Vitals: cómo los long tasks se mapean a INP y métricas de velocidad de página.