El event loop de JavaScript: tareas, microtareas y renderizado

Qué es

Un agente de JavaScript es un único hilo: cada trabajo se ejecuta hasta terminar antes de que empiece el siguiente, de modo que un bucle síncrono largo bloquea los clics, los temporizadores y el pintado hasta que finaliza (modelo de ejecución de MDN). El event loop del estándar HTML divide el trabajo en cola en tareas (temporizadores, finalización de operaciones de E/S, eventos, ejecución de scripts) y microtareas (reacciones de promesas, queueMicrotask, callbacks de MutationObserver). Tras cada tarea, el navegador realiza un punto de control de microtareas (microtask checkpoint): la cola de microtareas se vacía por completo, incluidas las microtareas que se encolan mientras se vacía, antes de tomar la siguiente tarea o de que se produzca una oportunidad de renderizado. await programa el resto de una función asíncrona como una microtarea.

Por qué importa

Los comportamientos de orden inesperados proceden de este modelo. console.log(1); setTimeout(() => console.log(2)); Promise.resolve().then(() => console.log(3)); console.log(4); imprime 1, 4, 3, 2: primero el código síncrono, después las microtareas y por último la tarea del temporizador. Un bucle que sigue programando microtareas nunca deja que la página se pinte, mientras que el trabajo dividido en tareas da al navegador un turno entre fragmentos. Las métricas de capacidad de respuesta, como INP, reflejan cuánto tiempo permanece ocupado el bucle en torno a una interacción.

Cómo aplicarlo

• Mantén cada tarea corta: divide los bucles intensivos en CPU en fragmentos y cede el control entre ellos con una pausa basada en tareas, por ejemplo await new Promise(r => setTimeout(r)), para que puedan ejecutarse la entrada y el renderizado.
• Traslada el cálculo realmente pesado a un Web Worker; el hilo principal solo envía mensajes.
• Usa queueMicrotask cuando algo deba ejecutarse después del código síncrono actual pero antes de cualquier otra cosa (por ejemplo, para agrupar varias llamadas síncronas en una sola actualización); no da un turno al navegador.
• No interpretes setTimeout(fn, 0) como «inmediatamente»: se ejecuta después de todas las microtareas pendientes y no antes de la siguiente tarea.
• Considera que await dentro de un bucle es secuencial; inicia primero las promesas independientes y luego usa await Promise.all(...).
• En Node.js existe además la cola process.nextTick; consulta su documentación antes de depender del orden entre esta y las reacciones de promesas.

Trampas

Una excepción lanzada dentro de una tarea solo termina esa tarea; el bucle continúa, lo que hace fácil pasar por alto los errores si no hay un manejador global. Los manejadores de eventos se ejecutan como parte del despacho, así que un manejador de clic lento retrasa la respuesta visual a ese clic. Las microtareas encoladas por un MutationObserver pueden observar un estado del DOM que nunca llegó a pintarse. Los navegadores limitan y ralentizan los temporizadores en las pestañas en segundo plano, por lo que la lógica de temporización no debe asumir retardos exactos.