El event loop de JavaScript es uno de los conceptos más importantes y menos entendidos. A pesar de ser single-threaded, su event loop permite concurrencia no bloqueante mediante un sistema de colas.

Call Stack

Estructura LIFO. Principio de run-to-completion: cada función se ejecuta hasta completarse antes de que otro código la interrumpa.

Cola de Macrotasks

Origen: setTimeout, setInterval, I/O, eventos UI. El event loop toma UNA macrotask por iteración, la ejecuta, luego procesa la cola de microtasks.

Cola de Microtasks

Mayor prioridad que macrotasks. Origen: Promises, queueMicrotask, MutationObserver. Toda la cola de microtasks se vacía antes de la siguiente macrotask. Peligro: hambruna de microtasks.

Async/Await Internals

async ejecuta síncronamente hasta el primer await, luego cede el control. await se desazucara en un .then() que se encola como microtask.

requestAnimationFrame y Renderizado

requestAnimationFrame ejecuta callbacks antes del pintado del navegador. Usar setTimeout para animaciones causa jank.

Implicaciones de rendimiento

Tareas largas (>50ms) bloquean el hilo principal. Usa Long Tasks API para monitorización, divide tareas largas con scheduler.yield(), offload a Web Workers.