Guide Node.js, partie 6: boucle d'événement, pile d'appels, minuteurs

Aujourd'hui, dans la sixième partie de la traduction du manuel Node.js, nous parlerons de la boucle d'événements, de la pile d'appels, de la fonction process.nextTick() et des temporisateurs. La compréhension de ces mécanismes et d'autres mécanismes Node.js est l'une des pierres angulaires du développement d'applications réussi pour cette plate-forme.

Boucle d'événement

Si vous voulez comprendre comment le code JavaScript est exécuté, la boucle d'événement est l'un des concepts les plus importants que vous devez comprendre. Ici, nous allons parler du fonctionnement de JavaScript en mode monothread et de la gestion des fonctions asynchrones.

Je développe JavaScript depuis de nombreuses années, mais je ne peux pas dire que j'ai complètement compris comment tout fonctionne, pour ainsi dire, "sous le capot". Le programmeur peut ne pas être au courant des subtilités du dispositif des sous-systèmes internes de l'environnement dans lequel il travaille. Mais il est généralement utile d'avoir au moins une idée générale de ces choses.

Le code JavaScript que vous écrivez s'exécute en mode monothread. À un certain moment, une seule action est exécutée. Cette limitation est en fait très utile. Cela simplifie considérablement le fonctionnement des programmes, éliminant ainsi la nécessité pour les programmeurs de résoudre des problèmes spécifiques aux environnements multithreads.

En fait, un programmeur JS doit faire attention uniquement aux actions que son code effectue exactement et essayer d'éviter les situations qui provoquent le blocage du thread principal. Par exemple - passer des appels réseau en mode synchrone et des cycles sans fin.

En règle générale, les navigateurs, dans chaque onglet ouvert, ont leur propre boucle d'événements. Cela vous permet d'exécuter le code de chaque page dans un environnement isolé et d'éviter les situations où une certaine page, dans le code dont il existe une boucle infinie ou des calculs lourds sont effectués, est capable de «suspendre» l'intégralité du navigateur. Le navigateur prend en charge le travail de nombreuses boucles d'événements simultanément existantes, utilisées, par exemple, pour traiter les appels vers diverses API. De plus, une boucle d'événement propriétaire est utilisée pour prendre en charge les travailleurs Web .

La chose la plus importante dont un programmeur JavaScript doit constamment se souvenir est que son code utilise sa propre boucle d'événements, donc le code doit être écrit pour que cette boucle d'événements ne soit pas bloquée.

Verrou de boucle d'événement

Tout code JavaScript qui prend trop de temps à exécuter, c'est-à-dire un code qui ne prend pas le contrôle de la boucle d'événements trop longtemps, bloque l'exécution de tout autre code de page. Cela conduit même à bloquer le traitement des événements de l'interface utilisateur, ce qui se reflète dans le fait que l'utilisateur ne peut pas interagir avec les éléments de la page et travailler normalement avec, par exemple, le défilement.

Presque tous les mécanismes d'E / S JavaScript de base ne sont pas bloquants. Cela s'applique à la fois au navigateur et à Node.js. Parmi ces mécanismes, par exemple, nous pouvons mentionner les outils pour effectuer des requêtes réseau utilisés dans les environnements client et serveur, et les outils pour travailler avec les fichiers Node.js. Il existe des méthodes synchrones pour effectuer de telles opérations, mais elles ne sont utilisées que dans des cas particuliers. C'est pourquoi les rappels traditionnels et les mécanismes plus récents - promesses et la construction asynchrone / attendent - sont d'une grande importance dans JavaScript.

Pile d'appels

La pile d'appels JavaScript est basée sur le principe LIFO (Last In, First Out - Last In, First Out). La boucle d'événements vérifie constamment la pile d'appels pour voir si elle a une fonction qui doit être exécutée. Si, lors de l'exécution du code, une fonction y est appelée, des informations la concernant sont ajoutées à la pile des appels et cette fonction est exécutée.

Si même avant que vous n'étiez pas intéressé par le concept de «pile d'appel», alors si vous avez rencontré des messages d'erreur qui incluent une trace de pile, vous imaginez déjà à quoi il ressemble. Ici, par exemple, ressemble à ceci dans un navigateur.


Message d'erreur du navigateur

Le navigateur, lorsqu'une erreur se produit, rend compte de la séquence d'appels aux fonctions, dont les informations sont stockées dans la pile d'appels, ce qui vous permet de trouver la source de l'erreur et de comprendre quels appels à quelles fonctions ont conduit à la situation.

Maintenant que nous avons parlé de la boucle d'événements et de la pile d'appels en termes généraux, considérons un exemple qui illustre l'exécution d'un fragment de code et à quoi ressemble ce processus en termes de boucle d'événements et de pile d'appels.

Boucle d'événement et pile d'appels

Voici le code que nous expérimenterons:

 const bar = () => console.log('bar') const baz = () => console.log('baz') const foo = () => { console.log('foo') bar() baz() } foo() 

Si ce code est exécuté, les éléments suivants arriveront à la console:

 foo bar baz 

Un tel résultat est tout à fait attendu. A savoir, lorsque ce code est exécuté, la fonction foo() est d'abord appelée. À l'intérieur de cette fonction, nous appelons d'abord la fonction bar() , puis la fonction baz() . Dans le même temps, la pile d'appels lors de l'exécution de ce code subit les modifications illustrées dans la figure suivante.


Modification de l'état de la pile d'appels lors de l'exécution du code sous enquête

La boucle d'événements, à chaque itération, vérifie s'il y a quelque chose dans la pile des appels, et si c'est le cas, elle le fait jusqu'à ce que la pile des appels soit vide.


Itérations de boucle d'événement

Mise en file d'attente d'une fonction

L'exemple ci-dessus semble assez ordinaire, il n'a rien de spécial: JavaScript trouve le code qui doit être exécuté et l'exécute dans l'ordre. Nous parlerons de la façon de différer l'exécution de la fonction jusqu'à ce que la pile d'appels soit effacée. Pour ce faire, la construction suivante est utilisée:

 setTimeout(() => {}), 0) 

Il vous permet d'exécuter la fonction passée à la fonction setTimeout() après l'exécution de toutes les autres fonctions appelées dans le code de programme.

Prenons un exemple:

 const bar = () => console.log('bar') const baz = () => console.log('baz') const foo = () => { console.log('foo') setTimeout(bar, 0) baz() } foo() 

Ce que ce code imprime peut sembler inattendu:

 foo baz bar 

Lorsque nous exécutons cet exemple, la fonction foo() est appelée en premier. Dans ce document, nous appelons setTimeout() , en passant cette fonction, comme premier argument, bar . En passant 0 comme deuxième argument, nous informons le système que cette fonction doit être exécutée le plus tôt possible. Ensuite, nous appelons la fonction baz() .

Voici à quoi ressemblera la pile d'appels.


Modification de l'état de la pile d'appels lors de l'exécution du code

Voici l'ordre dans lequel les fonctions de notre programme seront maintenant exécutées.


Itérations de boucle d'événement

Pourquoi cela se passe-t-il ainsi?

File d'attente des événements

Lorsque la fonction setTimeout() est appelée, le navigateur ou la plateforme Node.js démarre une minuterie. Une fois que la minuterie a fonctionné (dans notre cas, cela se produit immédiatement, puisque nous l'avons défini sur 0), la fonction de rappel passée à setTimeout() entre dans la file d'attente d'événements.

La file d'attente des événements, en ce qui concerne le navigateur, comprend les événements déclenchés par l'utilisateur - événements provoqués par des clics de souris sur les éléments de la page, événements qui sont déclenchés lorsque les données sont entrées à partir du clavier. Les gestionnaires d' onload DOM comme onload , les fonctions appelées lors de la réception de réponses aux demandes asynchrones de chargement de données, sont immédiatement là. Ici, ils attendent leur tour de traiter.

La boucle d'événements donne la priorité à ce qui se trouve dans la pile des appels. Tout d'abord, il fait tout ce qu'il parvient à trouver sur la pile, et une fois la pile vide, il procède au traitement de ce qui se trouve dans la file d'attente des événements.

Nous n'avons pas besoin d'attendre qu'une fonction comme setTimeout() finisse de fonctionner, car des fonctions similaires sont fournies par le navigateur et utilisent leurs propres flux. Ainsi, par exemple, en définissant le minuteur sur 2 secondes à l'aide de la fonction setTimeout() , vous ne devriez pas, après avoir arrêté l'exécution d'un autre code, attendre ces 2 secondes, car le minuteur fonctionne en dehors de votre code.

ES6 Job Queue

ECMAScript 2015 (ES6) a introduit le concept de Job Queue, qui est utilisé par les promesses (elles sont également apparues dans ES6). Grâce à la file d'attente des travaux, le résultat de l'exécution de la fonction asynchrone peut être utilisé le plus rapidement possible, sans avoir à attendre que la pile d'appels soit effacée.

Si une promesse est résolue avant la fin de la fonction en cours, le code correspondant sera exécuté immédiatement après la fin de la fonction en cours.

J'ai trouvé une analogie intéressante pour ce dont nous parlons. Cela peut être comparé à des montagnes russes dans un parc d'attractions. Une fois que vous avez parcouru la colline et que vous voulez recommencer, vous prenez un billet et montez en queue de file. Voici comment fonctionne la file d'attente des événements. Mais la file d'attente des travaux est différente. Ce concept est similaire à un billet à prix réduit, qui vous donne le droit de faire le prochain voyage immédiatement après avoir terminé le précédent.

Prenons l'exemple suivant:

 const bar = () => console.log('bar') const baz = () => console.log('baz') const foo = () => { console.log('foo') setTimeout(bar, 0) new Promise((resolve, reject) =>   resolve('should be right after baz, before bar') ).then(resolve => console.log(resolve)) baz() } foo() 

Voici ce qui sera sorti après son exécution:

 foo baz should be right after baz, before bar bar 

Ce que vous pouvez voir ici montre une sérieuse différence entre les promesses (et la construction async / wait, qui est basée sur elles) et les fonctions asynchrones traditionnelles, dont l'exécution est organisée à l'aide de setTimeout() ou d'autres API de la plate-forme utilisée.

process.nextTick ()

La méthode process.nextTick() interagit avec la boucle d'événements d'une manière spéciale. Une tique est un seul cycle complet d'événements. En passant la fonction à la méthode process.nextTick() , nous informons le système que cette fonction doit être appelée une fois l'itération en cours de la boucle d'événements terminée, avant le début de la suivante. L'utilisation de cette méthode ressemble à ceci:

 process.nextTick(() => { // -  }) 

Supposons qu'une boucle d'événement soit occupée à exécuter du code pour la fonction actuelle. Une fois cette opération terminée, le moteur JavaScript exécutera toutes les fonctions passées à process.nextTick() lors de l'opération précédente. En utilisant ce mécanisme, nous nous efforçons de nous assurer qu'une certaine fonction est exécutée de manière asynchrone (après la fonction actuelle), mais dès que possible, sans la placer dans la file d'attente.

Par exemple, si vous utilisez la construction setTimeout(() => {}, 0) , la fonction sera exécutée à la prochaine itération de la boucle d'événements, c'est-à-dire bien plus tard que lors de l'utilisation de process.nextTick() dans la même situation. Cette méthode doit être utilisée lorsqu'il est nécessaire de garantir l'exécution de code au tout début de la prochaine itération de la boucle d'événements.

setImmediate ()

Une autre fonction fournie par Node.js pour l'exécution de code asynchrone est setImmediate() . Voici comment l'utiliser:

 setImmediate(() => { //   }) 

La fonction de rappel passée à setImmediate() sera exécutée à la prochaine itération de la boucle d'événement.

En quoi setImmediate() différent de setTimeout(() => {}, 0) (c'est-à-dire d'un minuteur qui devrait fonctionner dès que possible) et de process.nextTick() ?

La fonction passée à process.nextTick() s'exécutera une fois l'itération en cours de la boucle d'événements terminée. Autrement dit, une telle fonction sera toujours exécutée avant la fonction dont l'exécution est planifiée à l'aide de setTimeout() ou setImmediate() .

L'appel de la fonction setTimeout() avec un délai défini de 0 ms est très similaire à l'appel de setImmediate() . L'ordre d'exécution des fonctions qui leur sont transférées dépend de divers facteurs, mais dans les deux cas, des rappels seront appelés à la prochaine itération de la boucle d'événements.

Minuteries

Nous avons déjà parlé de la fonction setTimeout() , qui vous permet de planifier des appels aux rappels qui lui sont passés. Prenons un peu de temps pour décrire plus en détail ses fonctionnalités et considérons une autre fonction, setInterval() , similaire à celle-ci. Dans Node.js, les fonctions de travail avec les temporisateurs sont incluses dans le module temporisateur , mais vous pouvez les utiliser sans connecter ce module dans le code, car elles sont globales.

▍ fonction setTimeout ()

Rappelez-vous que lorsque vous appelez la fonction setTimeout() , elle reçoit un rappel et l'heure, en millisecondes, après laquelle le rappel sera appelé. Prenons un exemple:

 setTimeout(() => { //   2  }, 2000) setTimeout(() => { //   50  }, 50) 

Ici, nous passons setTimeout() nouvelle fonction qui est immédiatement décrite, mais ici nous pouvons utiliser la fonction existante en passant setTimeout() son nom et un ensemble de paramètres pour l'exécuter. Cela ressemble à ceci:

 const myFunction = (firstParam, secondParam) => { //   } //   2  setTimeout(myFunction, 2000, firstParam, secondParam) 

La fonction setTimeout() renvoie un identifiant de temporisateur. Habituellement, il n'est pas utilisé, mais vous pouvez l'enregistrer et, si nécessaire, supprimer le minuteur si le rappel planifié n'est plus nécessaire:

 const id = setTimeout(() => { //      2  }, 2000) //  ,       clearTimeout(id) 

▍ Zéro retard

Dans les sections précédentes, nous avons utilisé setTimeout() , en le passant, comme le temps après lequel il est nécessaire d'appeler le rappel, 0 . Cela signifiait que le rappel serait appelé dès que possible, mais après l'achèvement de la fonction actuelle:

 setTimeout(() => { console.log('after ') }, 0) console.log(' before ') 

Un tel code affichera les éléments suivants:

 before after 

Cette technique est particulièrement utile dans les situations où, lors de l'exécution de tâches de calcul lourdes, je ne voudrais pas bloquer le thread principal, permettant à d'autres fonctions d'être exécutées, divisant ces tâches en plusieurs étapes, exécutées en tant setTimeout() .

Si nous rappelons la fonction setImmediate() ci-dessus, alors elle est standard dans Node.js, ce qui ne peut pas être dit à propos des navigateurs (elle est implémentée dans IE et Edge, mais pas dans d'autres).

▍ fonction setInterval ()

La fonction setInterval() est similaire à setTimeout() , mais il existe des différences entre elles. Au lieu d'exécuter le rappel qui lui est passé une fois, setInterval() appellera périodiquement, avec l'intervalle spécifié, ce rappel. Cela continuera, idéalement, jusqu'au moment où le programmeur arrêtera explicitement ce processus. Voici comment utiliser cette fonctionnalité:

 setInterval(() => { //   2  }, 2000) 

Un rappel passé à la fonction ci-dessus sera appelé toutes les 2 secondes. Afin de fournir la possibilité d'arrêter ce processus, vous devez obtenir l'identifiant du temporisateur retourné par setInterval() et utiliser la commande clearInterval() :

 const id = setInterval(() => { //   2  }, 2000) clearInterval(id) 

Une technique courante consiste à appeler clearInterval() à l'intérieur du rappel passé à setInterval() lorsqu'une certaine condition est remplie. Par exemple, le code suivant sera exécuté périodiquement jusqu'à ce que la propriété App.somethingIWait soit App.somethingIWait sur arrived :

 const interval = setInterval(function() { if (App.somethingIWait === 'arrived') {   clearInterval(interval)   //    -  ,   -    } }, 100) 

▍ Réglage récursif setTimeout ()

La fonction setInterval() appellera le rappel qui lui est passé toutes les n millisecondes, sans se soucier de savoir si ce rappel s'est terminé après son appel précédent.

Si chaque appel à ce rappel nécessite toujours le même temps inférieur à n , aucun problème ne se pose ici.


Appelé périodiquement, chaque session d'exécution prend le même temps, se situant dans l'intervalle entre les appels

Peut-être que cela prend un temps différent pour terminer un rappel, qui est toujours inférieur à n . Si, par exemple, nous parlons d'effectuer certaines opérations de réseau, alors cette situation est tout à fait attendue.


Appelé périodiquement, chaque session d'exécution prend un temps différent, se situant entre les appels

Lorsque vous utilisez setInterval() , une situation peut se produire lorsque le rappel prend plus de n , ce qui conduit à l'appel suivant avant la fin de l'appel précédent.


Appelé périodiquement, chaque session prend un temps différent, qui parfois ne correspond pas à l'intervalle entre les appels

Afin d'éviter cette situation, vous pouvez utiliser la technique de réglage de minuterie récursive en utilisant setTimeout() . Le fait est que le prochain rappel est prévu après la fin de son précédent appel:

 const myFunction = () => { //    setTimeout(myFunction, 1000) } setTimeout( myFunction() }, 1000) 

Avec cette approche, le scénario suivant peut être implémenté:


Un appel récursif à setTimeout () pour planifier l'exécution du rappel

Résumé

Aujourd'hui, nous avons parlé des mécanismes internes de Node.js, tels que la boucle d'événements, la pile d'appels, et discuté du travail avec des temporisateurs qui vous permettent de planifier l'exécution de code. La prochaine fois, nous aborderons le sujet de la programmation asynchrone.

Chers lecteurs! Avez-vous rencontré des situations où vous avez dû utiliser process.nextTick ()?