Accueil/Notions/Event Loop (JavaScript)

Event Loop (JavaScript)

L'Event Loop, ou boucle d'événements en français, est un concept central dans le fonctionnement de JavaScript, notamment dans des environnements comme Node.js et les navigateurs web. C'est ce qui permet à JavaScript, un langage à un seul Threads (programmation), de gérer efficacement des opérations asynchrones, comme les requêtes réseau ou les interactions utilisateur (Asynchrone (programmation)).

Pour comprendre l'Event Loop, imagine que tu as une liste de tâches à accomplir. Chaque tâche peut être rapide (comme lire une variable) ou lente (comme télécharger une image). JavaScript veut s'assurer que même si une tâche lente est en cours, le programme peut continuer à exécuter les tâches rapides sans attendre que la tâche lente soit terminée.

Fonctionnement de l'Event Loop

  1. Pile d'appels (Call Stack) : C'est là que JavaScript empile les fonctions appelées par ton code pour les exécuter. La fonction en haut de la pile est celle qui est en cours d'exécution. Quand elle est terminée, elle est retirée de la pile, et JS passe à la suivante.

  2. File d'attente des événements (Event Queue) : Lorsque des événements asynchrones se produisent (comme la fin d'un téléchargement), un événement est ajouté à cette file d'attente. Si la pile d'appels est vide, l'Event Loop prendra l'événement en tête de la file d'attente et commencera à exécuter la fonction associée.

  3. Heap : C'est la mémoire utilisée pour stocker les objets que ton programme crée.

Le cycle continue ainsi : l'Event Loop vérifie la pile d'appels, puis la file d'attente des événements. Si la pile est vide, il déplace l'événement du début de la file d'attente vers la pile d'appels.

typescript">Exemple en TypeScript

Imaginons que tu veuilles voir comment JavaScript gère les fonctions asynchrones avec l'Event Loop. Voici un exemple simple :

console.log("Premier");

setTimeout(() => {
  console.log("Deuxième");
}, 0);

console.log("Troisième");

Explication de l'exemple

  1. console.log("Premier") est exécuté immédiatement.
  2. setTimeout(() => console.log("Deuxième"), 0) est une fonction asynchrone. Le 0 indique qu'elle doit être exécutée dès que possible, mais après que les tâches synchrones en cours et celles en attente soient terminées. Elle est donc mise en attente.
  3. console.log("Troisième") est exécuté juste après le premier console.log.

Bien que le délai du setTimeout soit de 0 millisecondes, le "Deuxième" n'est pas imprimé immédiatement après le "Premier" à cause de l'Event Loop. JavaScript finit d'abord toutes les opérations dans la pile d'appels avant de traiter les événements dans la file d'attente. C'est pourquoi "Troisième" est affiché avant "Deuxième".

Ce modèle de gestion des tâches permet à JavaScript de rester réactif et performant, même lors de l'exécution de tâches lourdes ou longues.

Pour approfondir ta compréhension de JavaScript et des concepts liés à l'asynchronisme, voici une liste de notions et de fonctionnalités que tu pourrais explorer :

  1. Promises (JavaScript) : Comprendre comment les promesses fonctionnent pour gérer les opérations asynchrones de manière plus efficace et lisible que les callbacks simples.

  2. Async & Await : Une syntaxe plus récente pour écrire des fonctions asynchrones de manière à ce qu'elles ressemblent à des opérations synchrones, rendant le code plus clair et plus facile à maintenir.

  3. Event Emitters : Dans des environnements comme Node.js, comprendre comment les émetteurs d'événements permettent de gérer les événements de manière personnalisée.

  4. Web Workers : Explorer comment les web workers permettent d'exécuter du JavaScript en arrière-plan, sur un thread séparé, pour améliorer les performances des applications web lourdes.

  5. Service Workers : Apprendre à utiliser les service workers pour des scénarios hors ligne, la mise en cache des ressources, et d'autres fonctionnalités qui améliorent l'expérience utilisateur dans les applications web.

  6. Microtasks et Macrotasks : Comprendre la différence entre microtasks (promises, process.nextTick) et macrotasks (setTimeout, setInterval, I/O) et leur impact sur l'exécution du code JavaScript.

  7. Event Bubbling and Event Capturing : Connaître le mécanisme de propagation des événements dans le DOM (Document Object Model), utile pour la gestion fine des interactions utilisateur dans les applications web.

  8. Fuites de mémoire : Apprendre à identifier et à éviter les fuites de mémoire dans les applications JavaScript, un aspect crucial pour maintenir de bonnes performances.

  9. Performance Tuning : Techniques pour mesurer et améliorer la performance des applications JavaScript, notamment à travers le Profiling et le Benchmarking.

  10. concurrence (programmation) and Développement parallèle : Explorer les différences entre la concurrence et le parallélisme, et comment ces concepts peuvent être appliqués en JavaScript malgré son modèle à thread unique.

Chacune de ces notions peut t'ouvrir des perspectives nouvelles sur la programmation asynchrone et la gestion des performances dans les applications modernes.