Comment fonctionne la boucle d'événements (event…

La boucle d'événements en JavaScript (dans le contexte du navigateur web) est un mécanisme qui permet d'exécuter des opérations asynchrones sans bloquer le fil d'exécution principal. Elle se compose de plusieurs composants:

Heap (Tas): Zone mémoire où sont stockés les objets.
Pile d'appels (Call Stack): Structure de données LIFO qui suit l'exécution des fonctions synchrones.
Web APIs: Fournies par le navigateur (DOM, AJAX, setTimeout, setInterval, Event Listeners, etc.). Elles ne font pas partie du moteur JavaScript.
File de callbacks (Callback Queue) / File de tâches (Task Queue): File de messages pour exécuter des tâches asynchrones.
File de microtâches (Microtask Queue): File prioritaire pour microtâches (Promise.then(), async/await, queueMicrotask). Elle s'exécute avant la file de tâches.
Event Loop (Boucle d'événements): Vérifie en continu la pile d'appels et la file. Si la pile est vide, déplace le premier gestionnaire de la file de microtâches vers la pile. Après avoir vidé la file de microtâches, déplace le premier gestionnaire de la file de tâches vers la pile.

Le processus fonctionne ainsi:

Le code synchrone s'exécute et les fonctions sont placées dans la pile d'appels.
Lorsqu'une opération asynchrone est rencontrée (par exemple, setTimeout), elle est transférée à la Web API correspondante. L'exécution du code synchrone continue.
La Web API effectue l'opération en arrière-plan.
Une fois l'opération asynchrone terminée, le gestionnaire (callback) de cette opération est placé dans la file de tâches (pour les opérations asynchrones classiques) ou dans la file de microtâches (pour les promesses).
L'Event Loop vérifie en permanence la pile d'appels. Si elle est vide:
- Il vérifie la file de microtâches. Si des gestionnaires sont présents, il les déplace dans la pile d'appels pour exécution, jusqu'à ce que la file de microtâches soit vide.
- Ensuite, il vérifie la file de tâches. Si des gestionnaires sont présents, il déplace le premier dans la pile d'appels pour exécution.
Ce processus se répète, permettant d'exécuter des opérations asynchrones sans bloquer le fil principal.

Exemple avec setTimeout:

// Ce code s'exécute dans la pile d'appels
console.log('Start');

// setTimeout - Web API. Le callback est placé dans la file de tâches après 0ms.
// L'exécution réelle peut être retardée par le cycle d'événements.
setTimeout(() => {
  console.log('Timeout');
}, 0);

// Ce code s'exécute dans la pile d'appels après setTimeout
console.log('End');

// Résultat:
// Start
// End
// Timeout

Exemple avec des promesses:

// S'exécute dans la pile d'appels
console.log('A');

// La promesse. Le callback de then() est placé dans la file de microtâches
Promise.resolve().then(() => {
  console.log('B');
});

// S'exécute dans la pile d'appels
console.log('C');

// Résultat:
// A
// C
// B

Comment fonctionne la boucle d'événements (event loop) dans l'API web?