¿Qué son las tareas macro y micro?

Las tareas macro son etapas grandes y de alto nivel en el proceso del navegador, como analizar HTML, construir el DOM, construir el CSSOM, calcular estilos, construir el árbol de renderizado, layout, pintura y composición. Forman la línea de producción principal.

Las tareas micro son acciones más pequeñas y detalladas que se realizan después de completar la tarea macro actual y antes de comenzar la siguiente. Incluyen el manejo de promesas (Promise), MutationObserver, queueMicrotask.

La diferencia clave es que las tareas micro siempre se ejecutan inmediatamente después de la tarea macro actual, mientras que la siguiente tarea macro (por ejemplo, el siguiente cuadro de renderizado o la gestión del evento de temporizador setTimeout) solo se ejecuta después de que la cola de tareas micro esté vacía.

Ejemplo de orden de ejecución:

// Tarea macro (código inicial)
console.log('Inicio');

// Tarea macro (temporizador)
setTimeout(() => {
  console.log('Temporizador');
}, 0);

// Tarea micro (promesa)
Promise.resolve().then(() => {
  console.log('Promesa');
});

// Tarea macro (fin del código inicial)
console.log('Fin');

Salida en la consola:

Inicio
Fin
Promesa
Temporizador

Orden de ejecución:

1. Se ejecuta la tarea macro inicial (el script principal).
2. console.log('Inicio').
3. setTimeout coloca la tarea macro en la cola.
4. Promise.resolve().then() coloca la tarea micro en la cola.
5. console.log('Fin').
6. La tarea macro principal termina.
7. Se verifica la cola de tareas micro: se ejecuta Promise.resolve().then().
8. console.log('Promesa').
9. La cola de tareas micro está vacía.
10. El navegador procesa las tareas en el ciclo de eventos, pasa a la siguiente tarea macro.
11. Se procesa la tarea macro de setTimeout.
12. console.log('Temporizador').
13. La tarea macro termina.

Este entendimiento es importante para gestionar el orden de ejecución de operaciones asíncronas y comprender cómo funciona el Event Loop.