Boucle d'événements JavaScript : Exécution asynchrone non bloquante
La boucle d'événements JavaScript gère les opérations asynchrones en exécutant les rappels d'une file d'attente lorsque la pile d'appels est vide, empêchant ainsi le blocage du thread.
The event loop is a fundamental process in JavaScript's runtime environments (browsers, Node.js) that enables non-blocking asynchronous behavior. Since JavaScript is single-threaded, it can execute only one operation at a time. Without the event loop, long-running tasks (e.g., network requests, timers) would halt the main thread, leading to an unresponsive application. The event loop operates alongside the call stack, browser Web APIs (or Node.js APIs), and a task queue (or callback queue). When an asynchronous task is initiated, it's delegated to the appropriate API. Upon completion, its associated callback function is placed in the task queue. The event loop continuously checks if the call stack is clear. If it is, it dequeues the oldest callback from the task queue and pushes it onto the call stack for execution. This cycle ensures that asynchronous operations are handled efficiently without blocking the primary thread.
graph LR
Center["Boucle d'événements JavaScript : Exécution asynchrone non bloquante"]:::main
classDef main fill:#7c3aed,stroke:#8b5cf6,stroke-width:2px,color:white,font-weight:bold,rx:5,ry:5;
classDef pre fill:#0f172a,stroke:#3b82f6,color:#94a3b8,rx:5,ry:5;
classDef child fill:#0f172a,stroke:#10b981,color:#94a3b8,rx:5,ry:5;
classDef related fill:#0f172a,stroke:#8b5cf6,stroke-dasharray: 5 5,color:#94a3b8,rx:5,ry:5;
linkStyle default stroke:#4b5563,stroke-width:2px;
🧒 Explique-moi comme si j'avais 5 ans
Imaginez [JavaScript](/fr/terms/javascript) comme un chef qui ne peut faire qu'une chose à la fois. S'il doit cuire un gâteau (une tâche longue), il ne reste pas simplement là à attendre. Il met le gâteau au four et règle une minuterie, puis commence immédiatement à préparer une salade (une autre tâche). Lorsque la minuterie du four sonne, le chef termine la salade, sort le gâteau, puis passe à autre chose. La boucle d'événements est comme le système du chef pour gérer ces tâches en 'attente', s'assurant qu'elles sont traitées quand elles sont prêtes sans arrêter le travail des autres.
🤓 Expert Deep Dive
La boucle d'événements JavaScript est un modèle de concurrence qui orchestre l'exécution du code, des tâches et des événements. Elle surveille en permanence la pile d'appels et la ou les files d'attente de tâches. Le code synchrone est exécuté directement sur la pile d'appels. Les opérations asynchrones (par exemple, setTimeout, Promises, I/O) sont transmises aux API de l'environnement hôte, qui gèrent leur exécution. Une fois qu'une opération asynchrone est terminée, son rappel (ou le gestionnaire de résolution d'une Promise) est placé dans une file d'attente correspondante – la file d'attente des tâches (pour les macrotâches comme setTimeout, les événements DOM) ou la file d'attente des microtâches (pour les microtâches comme les Promises, queueMicrotask). La fonction principale de la boucle d'événements est, lorsque la pile d'appels est vide, de retirer des tâches de la file d'attente et de les exécuter. Les microtâches sont généralement traitées avant les macrotâches. Plus précisément, après la fin de la macrotâche actuelle et avant le début de la prochaine, la boucle d'événements exécutera toutes les microtâches disponibles. Cela donne la priorité aux rappels immédiats (comme la résolution des Promises) sur ceux qui sont différés, garantissant ainsi la réactivité et la gestion efficace des opérations asynchrones dans différents environnements JavaScript.