Quelles sont les macro- et micro-tâches?

Les macro-tâches sont des étapes importantes et de haut niveau dans le processus du navigateur, telles que l’analyse HTML, la construction du DOM, la construction du CSSOM, le calcul des styles, la construction de l’arbre de rendu, le layout, la peinture et la composition. Elles forment le pipeline principal.

Les micro-tâches sont des actions plus petites et détaillées qui sont effectuées après la fin de la tâche macro en cours et avant le début de la suivante. Elles incluent la gestion des promesses (Promise), MutationObserver, queueMicrotask.

La différence clé est que les micro-tâches s’exécutent toujours immédiatement après la tâche macro en cours, tandis que la tâche macro suivante (par exemple, le prochain frame de rendu ou la gestion de l’événement timer setTimeout) ne s’exécute qu’après que la file de micro-tâches soit vide.

Exemple d’ordre d’exécution :

// Tâche macro (code initial)
console.log('Début');

// Tâche macro (timer)
setTimeout(() => {
  console.log('Timer');
}, 0);

// Micro-tâche (promesse)
Promise.resolve().then(() => {
  console.log('Promesse');
});

// Tâche macro (fin du code initial)
console.log('Fin');

Sortie dans la console :

Début
Fin
Promesse
Timer

Ordre d’exécution :

1. La tâche macro initiale (le script principal) s’exécute.
2. console.log('Début').
3. setTimeout place la tâche macro dans la file.
4. Promise.resolve().then() place la micro-tâche dans la file.
5. console.log('Fin').
6. La tâche macro principale est terminée.
7. La file de micro-tâches est vérifiée : la micro-tâche Promise.resolve().then() s’exécute.
8. console.log('Promesse').
9. La file de micro-tâches est vide.
10. Le navigateur traite les tâches dans la boucle d’événements, passe à la tâche macro suivante.
11. La tâche macro de setTimeout est traitée.
12. console.log('Timer').
13. La tâche macro est terminée.

Cette compréhension est importante pour gérer l’ordre d’exécution des opérations asynchrones et comprendre le fonctionnement de l’Event Loop.