Recherche…
La boucle d'événement dans un navigateur Web
La grande majorité des environnements JavaScript modernes fonctionnent selon une boucle d'événement . Ceci est un concept courant dans la programmation informatique, ce qui signifie essentiellement que votre programme attend continuellement que de nouvelles choses se produisent et, le cas échéant, y réagisse. L' environnement hôte appelle dans votre programme, générant un "turn" ou "tick" ou "tâche" dans la boucle d'événements, qui s'exécute alors jusqu'à la fin . Lorsque ce tour est terminé, l'environnement hôte attend que quelque chose se produise avant que tout cela ne commence.
Un exemple simple est dans le navigateur. Prenons l'exemple suivant:
<!DOCTYPE html>
<title>Event loop example</title>
<script>
console.log("this a script entry point");
document.body.onclick = () => {
console.log("onclick");
};
setTimeout(() => {
console.log("setTimeout callback log 1");
console.log("setTimeout callback log 2");
}, 100);
</script>
Dans cet exemple, l'environnement hôte est le navigateur Web.
- L'analyseur HTML exécutera d'abord le
<script>. Il fonctionnera jusqu'à la fin. - L'appel à
setTimeoutindique au navigateur que, après 100 millisecondes, il doit mettre en file d'attente une tâche pour exécuter l'action donnée. - Dans l'intervalle, la boucle d'événements est ensuite chargée de vérifier en permanence s'il y a autre chose à faire: par exemple, rendre la page Web.
- Après 100 millisecondes, si la boucle d'événement n'est pas occupée pour une autre raison, elle verra la tâche définie par
setTimeoutet exécutera la fonction en consignant ces deux instructions. - A tout moment, si quelqu'un clique sur le corps, le navigateur publie une tâche dans la boucle d'événement pour exécuter la fonction de gestionnaire de clic. La boucle d'événement, pendant qu'elle vérifie continuellement ce qu'il faut faire, verra cela et exécutera cette fonction.
Vous pouvez voir comment, dans cet exemple, il existe plusieurs types de points d’entrée dans le code JavaScript, que la boucle d’événement appelle:
- L'élément
<script>est appelé immédiatement - La tâche
setTimeoutest envoyée à la boucle d'événement et exécutée une fois - La tâche du gestionnaire de clics peut être publiée plusieurs fois et exécutée à chaque fois
Chaque tour de la boucle d'événement est responsable de beaucoup de choses; seuls certains d'entre eux invoqueront ces tâches JavaScript. Pour plus de détails, voir la spécification HTML
Une dernière chose: que signifie-t-on en disant que chaque tâche de boucle d'événement "se termine"? Nous voulons dire qu'il n'est généralement pas possible d'interrompre un bloc de code en file d'attente pour s'exécuter en tant que tâche, et qu'il n'est jamais possible d'exécuter du code entrelacé avec un autre bloc de code. Par exemple, même si vous avez cliqué au moment opportun, vous ne pourrez jamais obtenir le code ci-dessus pour vous connecter "onclick" entre les deux setTimeout callback log 1/2" . Cela est dû au fonctionnement de la tâche est coopératif et basé sur la file d'attente, au lieu de préemptif.
Opérations asynchrones et boucle d'événements
De nombreuses opérations intéressantes dans les environnements de programmation JavaScript courants sont asynchrones. Par exemple, dans le navigateur, nous voyons des choses comme
window.setTimeout(() => {
console.log("this happens later");
}, 100);
et dans Node.js nous voyons des choses comme
fs.readFile("file.txt", (err, data) => {
console.log("data");
});
Comment cela cadre-t-il avec la boucle d'événement?
Comment cela fonctionne-t-il lorsque ces instructions s'exécutent, elles indiquent à l' environnement hôte (à savoir le navigateur ou le runtime Node.js, respectivement) de se déclencher et de faire quelque chose, probablement dans un autre thread. Lorsque l’environnement hôte a terminé cette opération (respectivement, attendre 100 millisecondes ou lire le fichier file.txt ), il publiera une tâche dans la boucle d’événement, en disant "Appelez le rappel que j’ai reçu plus tôt avec ces arguments".
La boucle d'événements est alors occupée à faire son travail: rendre la page Web, écouter les entrées de l'utilisateur et rechercher en permanence les tâches publiées. Quand il verra ces tâches envoyées pour appeler les rappels, il rappellera en JavaScript. C'est comme ça que vous obtenez un comportement asynchrone!