Boucle d’événements

JavaScript n’exécute qu’une seule instruction à la fois dans un navigateur : pas de traitement réellement simultané comme dans un langage multithreadé. Ce qui donne pourtant l’illusion de faire plusieurs choses en même temps (attendre une réponse réseau pendant qu’un clic reste réactif) repose sur la boucle d’événements : une fois la pile d’exécution en cours terminée, elle va chercher la prochaine tâche en attente — un clic, un minuteur écoulé, une réponse de fetch() — et l’exécute à son tour.

Pourquoi ça compte pour un développeur WordPress

Un script chargé sur une page WordPress qui exécute une boucle très longue ou un calcul lourd bloque la boucle d’événements du navigateur : la page devient inerte, aucun clic ni défilement ne répond tant que ce traitement n’est pas terminé. C’est une cause fréquente de « lenteur » perçue sur un site, distincte d’un problème de serveur : le blocage se produit entièrement côté navigateur, dans le fil d’exécution JavaScript de la page.

Exemple

console.log('1');
setTimeout(() => console.log('2'), 0);
console.log('3');
// Affiche 1, 3, 2 : le minuteur passe par la boucle d'événements,
// même avec un délai de 0 milliseconde

Bon à savoir

• Les promesses (Promise) et les fonctions async ne rendent pas JavaScript multithreadé : elles réorganisent seulement l’ordre de passage dans la boucle d’événements, avec une file de micro-tâches traitée en priorité sur les tâches classiques.
• Découper un traitement lourd en plusieurs petites étapes (avec setTimeout ou requestIdleCallback) laisse la boucle d’événements respirer entre chacune, plutôt que de la bloquer d’un seul bloc.
• Un script tiers mal optimisé, chargé par une extension WordPress, peut à lui seul saturer la boucle d’événements et rendre toute la page peu réactive, même si le reste du code est irréprochable.