Frontend Academy · Leçon

La boucle d’événements : pile d’appels, file et microtâches

La boucle d’événements : pile d’appels, file et microtâches est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

JavaScript est mono-thread

JavaScript s'exécute sur un seul thread : il ne peut exécuter qu'une seule portion de code à la fois. Pourtant, il gère des milliers d'opérations asynchrones (requêtes réseau, minuteurs, événements d'interface) sans bloquer l'exécution. Comment est-ce possible ? Grâce à la boucle d'événements.

La pile d'appels

La pile d'appels permet à JavaScript de suivre la fonction en cours d'exécution. Lorsqu'une fonction est appelée, un cadre est empilé. Lorsqu'elle renvoie un résultat, ce cadre est retiré. Si la pile est pleine (en cas de récursion infinie), une saturation de la pile se produit.

function c() { /* does something */ }
function b() { c(); }
function a() { b(); }
a();

// Call stack during c():
// c    ← top
// b
// a
// (anonymous)

Web APIs — Déléguer le travail

Lorsque JavaScript appelle une fonction asynchrone (setTimeout, fetch, addEventListener), le travail est délégué à une Web API du navigateur. Le moteur JS continue avec la ligne suivante : il n'attend pas.

console.log('1');
setTimeout(() => console.log('2'), 0); // handed to Web API
console.log('3');
// Output: 1, 3, 2

La file d'attente des tâches (file d'attente des macrotâches)

Lorsqu'une opération d'API Web se termine (le minuteur se déclenche, l'opération de récupération aboutit), la fonction de rappel est placée dans la file d'attente des tâches (file d'attente des macrotâches). La boucle d'événements ne déplace la fonction de rappel vers la pile d'appels que lorsque celle-ci est vide.

La file d'attente des microtâches

Les promesses utilisent une file d'attente des microtâches — une file d'attente prioritaire. Une fois chaque tâche terminée et avant de choisir la suivante, toutes les microtâches en attente sont exécutées. Les microtâches s'exécutent toujours avant la prochaine macrotâche.

console.log('1');
setTimeout(() => console.log('timeout'), 0);  // macrotask
Promise.resolve().then(() => console.log('promise')); // microtask
console.log('2');
// Output: 1, 2, promise, timeout

La boucle d'événements en action

Algorithme de la boucle d'événements : 1) Exécutez la tâche actuelle de la pile d'appels jusqu'à ce qu'elle soit vide. 2) Videz entièrement la file d'attente des microtâches. 3) Effectuez éventuellement le rendu. 4) Prenez la prochaine macrotâche et recommencez.

queueMicrotask()

queueMicrotask(fn) planifie une fonction de rappel dans la file d'attente des microtâches sans créer de promesse. Vous en aurez rarement besoin directement, mais cette fonction est utile pour comprendre comment les bibliothèques mettent en œuvre la planification.

queueMicrotask(() => console.log('microtask'));
console.log('sync');
// Output: sync, microtask

Pourquoi les tâches longues bloquent l'interface

Si une tâche synchrone s'exécute trop longtemps (une boucle serrée qui traite un grand volume de données), la boucle d'événements ne peut plus traiter les événements de l'interface ni effectuer le rendu. La page se fige alors. Découpez les tâches longues en blocs avec setTimeout pour redonner la main à la boucle d'événements.

// Bad — blocks the UI for seconds:
for (let i = 0; i < 10_000_000; i++) { /* heavy work */ }

// Better — yield periodically:
async function processInChunks(items) {
  for (let i = 0; i < items.length; i++) {
    process(items[i]);
    if (i % 100 === 0) await new Promise(r => setTimeout(r, 0)); // yield
  }
}

Les travailleurs Web — un véritable parallélisme

Pour les tâches qui sollicitent fortement le processeur, utilisez un travailleur Web — un thread distinct doté de sa propre boucle d'événements. Les travailleurs communiquent avec le thread principal via postMessage. Il n'y a ni mémoire partagée ni conditions de concurrence.

requestAnimationFrame

requestAnimationFrame(callback) planifie une fonction de rappel avant le prochain rafraîchissement du navigateur. Utilisez-le pour les animations pilotées par JavaScript : il se synchronise avec la fréquence de rafraîchissement de l'écran (généralement 60 images/s).

function animate(timestamp) {
  // update positions based on timestamp
  element.style.transform = `translateX(${timestamp * 0.1 % 400}px)`;
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

Visualiser la boucle d'événements

La démonstration interactive de latentflip.com/loupe vous permet de coller du code et d'observer la pile d'appels, l'API Web, la file d'attente des tâches et la boucle d'événements au ralenti. Elle est indispensable pour acquérir une bonne intuition du fonctionnement.

Vérification rapide

Après la résolution d'une promesse, dans quelle file d'attente sa fonction de rappel .then() s'exécute-t-elle ?

Récapitulatif : la boucle d'événements

JavaScript s'exécute sur un seul thread. Les tâches asynchrones sont confiées aux API Web. Les fonctions de rappel reviennent par la file d'attente des tâches (setTimeout, fonctions de rappel de récupération) ou par la file d'attente des microtâches (promesses). Après chaque tâche, la boucle d'événements vide les microtâches avant le rendu ou la macrotâche suivante. Un code synchrone long bloque tout le reste.

Questions Fréquemment Posées

La leçon « La boucle d’événements : pile d’appels, file et microtâches » est-elle gratuite ?

Oui — le texte complet de « La boucle d’événements : pile d’appels, file et microtâches » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « La boucle d’événements : pile d’appels, file et microtâches » ?

Visualisez l’exécution de JavaScript : la pile d’appels, la file des tâches, les microtâches issues des Promises et les raisons pour lesquelles l’interface ne se bloque jamais pendant les opérations… Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Frontend Academy ?

Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « La boucle d’événements : pile d’appels, file et microtâches » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?

Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

La boucle d’événements : pile d’appels, file et microtâches
Rappels et enfer des rappels
Promises : then, catch, finally et Promise.all
async/await et gestion des erreurs

← Retour à Frontend Academy