JavaScript concepts clés : monothread et eventloop

Avant de présenter les différents patterns pour gérer l’asynchronisme en JavaScript, il est préférable de connaitre quelques concepts clés comme l’exécution sur un seul thread ou encore l’event loop. Cet article à pour but des les présenter.

Un seul thread pour l’application

JavaScript est un langage monothread, c’est à dire qu’à un instant T, un seul morceau de code s’exécute. On peut considérer, qu’une fonction est un morceau de code indivisible : quand un moteur JavaScript débute l’exécution d’une fonction il finit son exécution jusqu’à la fin (principe de « run to completion »).
Ce modèle possède un désavantage : l’appel d’un processus de longue durée bloque toute exécution tant que ce processus n’est pas terminé. Les éléments d’interface utilisateur cessent de répondre, les animations sont suspendues et aucun autre code de l’application ne peut s’exécuter. Généralement, le navigateur affiche un message de la sorte « Le script met trop de temps à répondre ».

Event loop

Il faut savoir que JavaScript gère la concurrence grâce à une « boucle d’évènements ». Ce modèle est différent de la gestion faite par des langages comme C ou Java. Afin de la comprendre ce qu’est l’event loop, trois parties importantes d’un moteur JavaScript méritent d’être présentées. Bien que l’implémentation des différents moteurs soient différentes, le principe reste vrai pour chacun d’eux.

eventloop1

Heap : La Heap est la partie la plus simple. C’est une zone de mémoire où vivent les objets (variables, fonctions …).

Stack : La stack est l’endroit où les fonctions en cours d’exécutions sont placées. Si une fonction A() lance une fonctin B() il y a deux niveaux dans la stack.
A chaque fois qu’une fonction est ajoutée à la stack elle est appelée « frame ». Les « frames » contiennent des pointeurs vers les fonctions situées dans la heap, vers les objects accessibles dans le scope de la fonction et bien sûr les paramètres d’appel de la fonction.

Queue : file de messages à traiter. Chaque message est associé à une fonction. Lorsque la pile est vide, c’est au tour du prochain message d’être traité. Ce message rempli alors la stack. Le traitement d’un message est fini quand la stack devient vide.
Si vous codez setTimeout(function() { console.log(‘pouet’); }, 10);, cette fonction anonyme sera mise dans la queue.
Aucune fonction dans la queue ne sera exécutée tant que la stack n’est pas vide. C’est pour cela que le deuxième paramètre de la fonction setTimeout assure un temps minimum avant l’exécution
et non pas un temps garanti.

Donnons vie à ce schéma.

 

Sources

https://thomashunter.name/blog/the-javascript-event-loop-presentation/
https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Boucle%C3%89v%C3%A9nements

 

 

Laisser un commentaire


neuf − = 7


NOTE - Vous pouvez utiliser les éléments et attributs HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>