La boucle d'événements de JavaScript : tâches, microtâches et rendu

Ce que c'est

Un agent JavaScript est un thread unique : chaque tâche s'exécute jusqu'à son terme avant que la suivante ne commence, si bien qu'une longue boucle synchrone bloque les clics, les minuteurs et l'affichage jusqu'à son retour (modèle d'exécution MDN). La boucle d'événements de la norme HTML répartit le travail en file d'attente entre les tâches (minuteurs, complétions d'entrées-sorties, événements, exécution de scripts) et les microtâches (réactions de promesses, queueMicrotask, rappels de MutationObserver). Après chaque tâche, le navigateur effectue un point de contrôle des microtâches : la file des microtâches est intégralement vidée, y compris les microtâches mises en file pendant le vidage, avant que la tâche suivante ne soit prise ou qu'une occasion de rendu ne se présente. await planifie le reste d'une fonction async comme une microtâche.

Pourquoi c'est important

Les surprises d'ordonnancement viennent de ce modèle. console.log(1); setTimeout(() => console.log(2)); Promise.resolve().then(() => console.log(3)); console.log(4); affiche 1, 4, 3, 2 : d'abord le code synchrone, puis les microtâches, puis la tâche du minuteur. Une boucle qui ne cesse de planifier des microtâches ne laisse jamais la page s'afficher, tandis qu'un travail découpé en tâches donne la main au navigateur entre les morceaux. Des métriques de réactivité comme l'INP reflètent la durée pendant laquelle la boucle reste occupée autour d'une interaction.

Comment l'appliquer

• Garder chaque tâche courte : découper les boucles gourmandes en CPU et céder la main entre les morceaux avec une pause fondée sur une tâche, par exemple await new Promise(r => setTimeout(r)), afin que les entrées et le rendu puissent s'exécuter.
• Déplacer les calculs réellement lourds vers un Web Worker ; le thread principal se contente d'envoyer des messages.
• Utiliser queueMicrotask lorsque quelque chose doit s'exécuter après le code synchrone en cours mais avant tout le reste (regrouper plusieurs appels synchrones en une seule mise à jour) ; cela ne donne pas la main au navigateur.
• Ne pas lire setTimeout(fn, 0) comme « immédiatement » : il s'exécute après toutes les microtâches en attente, et pas avant la tâche suivante.
• Traiter await dans une boucle comme séquentiel ; démarrer d'abord les promesses indépendantes et faire await Promise.all(...).
• Dans Node.js, il existe une file supplémentaire process.nextTick ; consulter sa documentation avant de dépendre de l'ordre entre elle et les réactions de promesses.

Pièges

Une exception levée à l'intérieur d'une tâche ne met fin qu'à cette tâche ; la boucle continue, ce qui rend les erreurs faciles à manquer sans gestionnaire global. Les gestionnaires d'événements s'exécutent dans le cadre de la répartition, si bien qu'un gestionnaire de clic lent retarde la réponse visuelle à ce clic. Les microtâches mises en file par un MutationObserver peuvent observer un état du DOM qui n'a jamais été affiché. Les navigateurs plafonnent et limitent les minuteurs dans les onglets en arrière-plan, si bien que la logique de temporisation ne doit pas supposer des délais exacts.