Questions d'entretien technique - Boucle d'événement de partie

Introduction

Bonjour à tous !

Aujourd’hui, comme le titre l’indique ?, je vais parler de la boucle événementielle.

Ce n'est pas un sujet sur lequel les intervieweurs posent souvent directement des questions (je ne me souviens que de deux occasions où ils m'ont demandé d'expliquer la boucle des événements). MAIS, dans la plupart des entretiens, ils posent des questions qui y sont liées. Par exemple :

• "Si je fais ça… quel devrait être le comportement ?"
• "Si mon code ressemble à ceci, quel sera le résultat ?"
• "Pourquoi ce code produit-il cette sortie ?"

Il est beaucoup plus facile de répondre à toutes ces questions si vous comprenez comment fonctionne la boucle événementielle.

Je vais être honnête : ce sujet n’est pas mon préféré. Je préfère de loin les questions sur le comportement du code plutôt que d'expliquer comment fonctionne la boucle d'événements pendant 10 minutes d'affilée.?

Plongeons-nous ! ?

## Questions
1. Qu'est-ce que la boucle d'événements ?
2. Exemples

Qu'est-ce que la boucle d'événements ?

Réponse courte :

La boucle d'événements est responsable de la gestion des tâches asynchrones dans le runtime JavaScript.

Pour être honnête, je ne pense pas que cette réponse soit suffisante pour satisfaire la curiosité d'un intervieweur s'interrogeant sur la boucle événementielle. C’est pourquoi, dans cet article, j’aimerais approfondir ce sujet.

Plus que simplement connaître les concepts, il est important de comprendre comment cela fonctionne. C'est pourquoi j'ai ajouté quelques exemples à la fin.

Théorie

Qu’est-ce que la boucle d’événements ?

JavaScript a un runtime basé sur une boucle d'événements, qui est responsable de la gestion des tâches. Chaque langage a un environnement d'exécution unique, et un point important à noter est que JavaScript est mono-thread.

Que signifie un seul thread ?

Single-thread signifie que JavaScript ne peut gérer qu'une seule tâche à la fois. C'est pourquoi la boucle d'événements est si essentielle en JavaScript ; cela permet de gérer les tâches efficacement malgré cette limitation d'un seul thread.

Composants du runtime

Pour mieux comprendre la boucle événementielle, examinons d'abord ses principaux composants :

Pile d'appels

La pile d'appels est une structure de données qui assure le suivi des fonctions que nous appelons. Vous pouvez le considérer comme une pile de plaques : lorsqu’une fonction est appelée, elle est ajoutée à la pile, et lorsqu’elle est terminée, elle est supprimée de la pile.

La pile d'appels fonctionne selon le principe LIFO (Last-In-First-Out), ce qui signifie que JavaScript exécute les fonctions dans l'ordre dans lequel elles sont empilées : de l'élément le plus haut vers le bas, un à l'autre. une fois (rappelez-vous, JavaScript est monothread).

Files d'attente

Dans le runtime JavaScript, nous avons des files d'attente qui contiennent des listes de tâches à traiter. Les tâches dans ces files d'attente attendent que la pile d'appels soit vide.

• File d'attente des tâches (ou file d'attente de rappel) : Cette file d'attente stocke des tâches telles que les appels setTimeout() et setInterval(). Les tâches ici sont traitées une fois que la pile d'appels est vide et après que toutes les tâches de la file d'attente Microtask ont ​​été traitées. Découvrez plus d'exemples de tâches stockées dans cette file d'attente sur MDN.

• File d'attente des microtâches : Cette file d'attente a la priorité sur la file d'attente des tâches. Il comprend des microtâches telles que les rappels Promise et des fonctions asynchrones comme process.nextTick() et des fonctions asynchrones.

La Task Queue fonctionne sur une base FIFO (First-In-First-Out), ce qui signifie que les tâches sont traitées dans l'ordre dans lequel elles sont ajoutées, mais seulement après la microtâche. La file d'attente est vide.

Boucle d'événement

La boucle d'événements est un mécanisme qui gère l'exécution de code asynchrone. Il observe la pile d'appels et les coordonnées entre la pile d'appels et les files d'attente (Task Queue et Microtask Queue) pour assurer le bon fonctionnement du code.

Comment ça marche ?

Parcourons le processus de boucle d'événements étape par étape. Reportez-vous à l'image ci-dessous pour une représentation visuelle.

Dans cet exemple :

• La Call Stack a une fonction.
• La File d'attente des microtâches contient deux messages.
• La file d'attente des tâches contient un message.

Étape 1 : traiter la pile d'appels

1. La boucle d'événements commence en regardant la Call Stack.
2. Il trouve une fonction dans la pile et commence à l'exécuter.
3. Une fois cette fonction terminée, elle est supprimée de la Pile d'appels.

Étape 2 : traiter la file d'attente des microtâches

1. Une fois la Pile d'appels vide, la boucle d'événements vérifie la File d'attente des microtâches.
2. Il prend le premier message de la File d'attente des microtâches et le pousse vers la Pile d'appels pour exécution.

1. La fonction s'exécute et, une fois terminée, est supprimée de la Call Stack.
2. La boucle d'événements passe ensuite au message suivant dans la File d'attente des microtâches et répète le processus.
3. Cela continue jusqu'à ce qu'il n'y ait plus de messages dans la File d'attente des microtâches.

Étape 3 : traiter la file d'attente des tâches

1. Une fois que la Pile d'appels et la File d'attente des microtâches sont vides, la boucle d'événements se tourne vers la File d'attente des tâches.
2. Il sélectionne le premier message dans la File d'attente des tâches et l'ajoute à la Pile d'appels.
3. La fonction s'exécute et lorsqu'elle est terminée, elle est supprimée de la Pile d'appels.
4. La boucle d'événements poursuivra ce processus avec chaque tâche dans la File d'attente des tâches, garantissant que toutes les tâches sont traitées une par une.

En suivant cet ordre—Call Stack, puis Microtask Queue et enfin Task Queue—la boucle d'événements aide JavaScript à gérer efficacement le code asynchrone, même dans son environnement monothread.

Exemples

Maintenant que nous comprenons comment fonctionne la boucle d'événements et comment les tâches sont hiérarchisées, regardons quelques exemples.

Exemple 1

const a = new Promise(function showA(resolve){
  console.log('A');
  resolve('B');
});

setTimeout(function showC() {
  console.log('C');
}, 0);

a.then(function showB(b) {
  console.log(b);
});

const d = function showD() {
  console.log('D');
};

d();

Avant de continuer, essayez de réfléchir à l'ordre de sortie.

✨Qu'attendez-vous que ce soit ?✨

Décomposons chaque partie du code pour comprendre pourquoi nous obtenons ce résultat.

1. Créer la promesse

const a = new Promise(function showA(resolve) {
  console.log('A');
  resolve('B');
});

• Ici, nous créons une nouvelle promesse avec une fonction de rappel.
• Dans cette fonction, console.log('A') est exécuté immédiatement, donc "A" est imprimé sur la console.
• Après avoir enregistré "A", la promesse est résolue avec la valeur "B".
• JavaScript reconnaît qu'il existe un rappel .then (c'est-à-dire showB) qui devrait s'exécuter une fois que la pile d'appels principale est claire, il ajoute donc showB à la File d'attente des microtâches (puisque les résolutions de promesses y vont).

2. setTimeout Appel

setTimeout(function showC() {
  console.log('C');
}, 0);

• La fonction setTimeout planifie l'exécution de showC après 0 milliseconde.
• JavaScript place showC dans la file d'attente des tâches car il s'agit d'une fonction basée sur un minuteur.

3. a.puis rappel

const a = new Promise(function showA(resolve){
  console.log('A');
  resolve('B');
});

setTimeout(function showC() {
  console.log('C');
}, 0);

a.then(function showB(b) {
  console.log(b);
});

const d = function showD() {
  console.log('D');
};

d();

• Cette ligne enregistre un gestionnaire .then pour la promesse que nous avons déjà résolue à l'étape précédente (resolve('B')).
• Puisque la promesse est résolue, showB (le rappel .then) est ajouté à la File d'attente des microtâches.

4. Définir d

const a = new Promise(function showA(resolve) {
  console.log('A');
  resolve('B');
});

• Cette ligne définit simplement la fonction showD mais ne l'exécute pas encore, donc rien ne se passe ici.

5. Appel de d()

setTimeout(function showC() {
  console.log('C');
}, 0);

• Maintenant, nous appelons d(), qui est ajouté à la Call Stack et exécuté. Cela donne console.log('D'), donc "D" est imprimé sur la console.

Ordre de sortie final :

a.then(function showB(b) {
  console.log(b);
});

GIF pour référence

Exemple interactif

Exemple 2

const d = function showD() {
  console.log('D');
};

Encore une fois, prenez un moment pour réfléchir à l'ordre de sortie.

✨Qu'attendez-vous que ce soit ?✨

C'est parti pour l'explication...

1. Journalisation "Démarrer!"

d();

• Cette ligne est ajoutée à la Call Stack et exécutée immédiatement.
• En conséquence, "Démarrer!" est imprimé sur la console.

1. Appel setTimeout

A
D
B
C

• La fonction setTimeout planifie que showTimeout s'exécute après 0 milliseconde.
• JavaScript place showTimeout dans la file d'attente des tâches puisqu'il s'agit d'une fonction basée sur une minuterie.

3. Promesse de résolution

console.log("Start!");

setTimeout(function showTimeout() {
  console.log("Timeout!");
}, 0);

Promise.resolve("Promise!")
  .then(function showPromise(res) {
    console.log(res);
  });

console.log("End!");

• La promesse est résolue immédiatement avec la valeur "Promesse!".
• JavaScript place showPromise (le rappel .then) dans la File d'attente des microtâches car les promesses vont dans la file d'attente des microtâches après avoir été résolues.

4. Journalisation "Fin!"

console.log("Start!");

• Cette ligne est ajoutée à la Call Stack et exécutée immédiatement.
• En conséquence, "Fin!" est imprimé sur la console.

Ordre de sortie final :

setTimeout(function showTimeout() {
  console.log("Timeout!");
}, 0);

GIF pour référence

Exemple interactif

Fin

Ce chapitre n'était pas trop long, mais j'espère que ces exemples vous ont aidé à comprendre comment fonctionne la boucle d'événements.

Je recommande fortement d'expérimenter la page interactive pour analyser d'autres exemples. Jouer sur cette page peut rendre beaucoup plus facile la compréhension de la boucle d'événements en action.

Merci beaucoup pour tout l'amour sur mes messages précédents !

A la semaine prochaine ! ?

Au revoir

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!