Asynchrone et monotâche JavaScript ?

• Temps d'exécution

JavaScript est un langage interprété et non compilé. Cela signifie qu'il a besoin d'un interprète qui convertit les fichiers JS code à un code machine. Il existe plusieurs types d'interprètes (appelés moteurs). Les moteurs de navigateur les plus populaires sont V8 (Chrome), Quantum (Firefox) et WebKit (Safari). Par ailleurs, V8 est également utilisé dans un moteur d'exécution populaire qui n'est pas celui d'un navigateur, Node.js.

Chaque moteur contient un tas de mémoire, une pile d'appels, une boucle d'événements, une file d'attente de rappels et une interface WebAPI avec des requêtes HTTP, des minuteries, des événements, etc., tous mis en œuvre à leur manière pour une interprétation plus rapide et plus sûre du code JS.

Architecture de base de l'exécution JS. L'auteur : Alex Zlatkov

Fil unique

Un langage monotâche est un langage avec une seule pile d'appels et un seul tas de mémoire. Cela signifie qu'il n'exécute qu'une seule chose à la fois.

A pile est une région continue de la mémoire, qui alloue un contexte local à chaque fonction exécutée.

A tas est une région beaucoup plus grande, qui stocke tout ce qui est alloué dynamiquement.

A pile d'appels est une structure de données qui enregistre essentiellement l'endroit où nous nous trouvons dans le programme.

Pile d'appels

Écrivons un code simple et suivons ce qui se passe sur la pile d'appels.

Comme vous pouvez le voir, les fonctions sont ajoutées à la pile, exécutées puis supprimées. C'est ce qu'on appelle la méthode LIFO (Last In, First Out). Chaque entrée de la pile d'appels est appelée cadre de la pile.

La connaissance de la pile d'appels est utile pour lire les traces de la pile d'erreurs. En général, la raison exacte de l'erreur se trouve en haut de la première ligne, bien que l'ordre d'exécution du code soit ascendant.

Parfois, vous pouvez faire face à une erreur courante, notifiée par Dépassement de la taille maximale de la pile d'appels. Il est facile d'obtenir cela en utilisant la récursivité :

function foo() {
    foo()
}
foo()

et notre navigateur ou notre terminal se bloque. Chaque navigateur, même dans ses différentes versions, a une limite de taille de pile d'appels différente. Dans la grande majorité des cas, elles sont suffisantes et le problème doit être recherché ailleurs.

Pile d'appels bloquée

Voici un exemple de blocage du fil JS. Essayons de lire un foo et un fichier bar en utilisant le NœudFonction synchrone .js readFileSync.

Il s'agit d'un GIF en boucle. Comme vous le voyez, le moteur JS attend jusqu'au premier appel dans readFileSync est achevée. Mais cela ne se produira pas parce qu'il n'y a pas de foo de sorte que la seconde fonction ne sera jamais appelée.

Comportement asynchrone

Cependant, JS peut également être non bloquant et se comporter comme s'il était multithreadé. Cela signifie qu'il n'attend pas la réponse d'un appel API, les événements E/S, etc., et peut poursuivre l'exécution du code. Cela est possible grâce aux moteurs JS qui utilisent (sous le capot) de véritables langages multithreading, comme C++ (Chrome) ou Rust (Firefox). Ils nous fournissent l'API Web sous le capot des navigateurs ou ex. I/O API sous Node.js.

Dans le GIF ci-dessus, nous pouvons voir que la première fonction est poussée sur la pile d'appels et que la fonction Bonjour est immédiatement exécutée dans la console.

Ensuite, nous appelons le setTimeout fournie par l'interface WebAPI du navigateur. Elle passe dans la pile d'appels et son rappel asynchrone foo est placée dans la file d'attente de la WebApi, où elle attend l'appel, qui doit avoir lieu au bout de 3 secondes.

Entre-temps, le programme continue le code et nous voyons Bonjour, je ne suis pas bloqué dans la console.

Après avoir été invoquée, chaque fonction de la file d'attente de l'interface WebAPI est placée dans la file d'attente de l'interface WebAPI. File d'attente de rappel. C'est là que les fonctions attendent que la pile d'appels soit vide. Lorsque c'est le cas, elles y sont déplacées une à une.

Ainsi, lorsque notre setTimeout termine le compte à rebours, notre foo va dans la file d'attente des rappels, attend que la pile d'appels devienne disponible, s'y rend, est exécutée et nous voyons Hi from asynchronous callback dans la console.

Boucle d'événements

La question est de savoir comment le système d'exécution sait que la pile d'appels est vide et comment l'événement de la file d'attente de rappel est invoqué. Voici la boucle d'événements. Elle fait partie du moteur JS. Ce processus vérifie constamment si la pile d'appels est vide et, si c'est le cas, contrôle s'il y a un événement dans la file d'attente des rappels qui attend d'être invoqué.

C'est toute la magie des coulisses !

Synthèse de la théorie

Concurrence et parallélisme

Concurrence signifie l'exécution de plusieurs tâches en même temps, mais pas simultanément. Par exemple, deux tâches se déroulent dans des périodes de temps qui se chevauchent.

Parallélisme désigne l'exécution simultanée de deux tâches ou plus, par exemple l'exécution de plusieurs calculs en même temps.

Fils et processus

Fils sont une séquence d'exécution de code qui peut être exécutée indépendamment l'une de l'autre.

Processus est une instance d'un programme en cours d'exécution. Un programme peut avoir plusieurs processus.

Synchrone et asynchrone

En synchrone les tâches sont exécutées l'une après l'autre. Chaque tâche attend que la tâche précédente soit terminée et n'est exécutée qu'à ce moment-là.

En asynchrone Lorsqu'une tâche est exécutée, vous pouvez passer à une autre tâche sans attendre que la précédente soit terminée.

Synchrone et asynchrone dans un environnement simple et multithread

Synchrone avec un seul thread: Les tâches sont exécutées l'une après l'autre. Chaque tâche attend que la tâche précédente soit exécutée.

Synchrone avec plusieurs fils d'exécution: Les tâches sont exécutées dans différents threads, mais attendent les autres tâches en cours d'exécution dans un autre thread.

Asynchrone avec un seul thread: Les tâches commencent à être exécutées sans attendre la fin d'une autre tâche. À un moment donné, une seule tâche peut être exécutée.

Asynchrone avec plusieurs fils d'exécution: Les tâches sont exécutées dans différents threads sans attendre que d'autres tâches soient achevées et terminent leur exécution de manière indépendante.

Classification JavaScript

Si l'on considère la façon dont les moteurs JS fonctionnent sous le capot, on peut classer JS comme un langage interprété asynchrone et monotâche. Le mot "interprété" est très important car il signifie que le langage sera toujours dépendant du temps d'exécution et ne sera jamais aussi rapide que les langages compilés avec multithreading intégré.

Il convient de noter que Node.js peut réaliser un véritable multithreading, à condition que chaque thread soit démarré comme un processus distinct. Il existe des bibliothèques pour cela, mais Node.js dispose d'une fonctionnalité intégrée appelée Fils de travailleurs.

Tous les GIF de boucles d'événements proviennent du site Loupe créée par Philip Roberts, où vous pouvez tester vos scénarios asynchrones.

En savoir plus :

Pourquoi devriez-vous (probablement) utiliser Typescript ?

La qualité avant tout ! 5 étapes faciles pour lester votre code avec les workflows GitHub dans le projet JavaScript

Comment améliorer les applications Vue.js ? Quelques conseils pratiques