JavaScript est un langage de programmation très populaire et il devient de plus en plus puissant au fil du temps. Comme sa popularité ne cesse d’augmenter, diverses entreprises tirent parti de son support à de nombreux niveaux dans leur pile technologique, qu’il s’agisse d’applications front-end, back-end, full-stack ou intégrées. Dans ce premier volet de la série «À l’intérieur du moteur JavaScript”, nous allons approfondir le fonctionnement de JavaScript sous le capot. Puis dans la seconde partie, nous allons découvrir le moteur JavaScript.
Presque tout le monde a entendu parler du moteur V8 et chaque développeur Web doit savoir que JavaScript est un langage à thread unique utilisé pour développer et ajouter des fonctionnalités aux sites Web. Dans ce didacticiel de développement Web, nous allons explorer les concepts de JavaScript et son fonctionnement réel. En connaissant ces concepts de base, vous serez en mesure d’écrire du code JavaScript propre, meilleur et non bloquant.
Si vous êtes un programmeur JavaScript débutant, cet article vous aidera à comprendre ce qui rend JavaScript si différent des autres langages. Et, si vous êtes un programmeur JavaScript expérimenté, cela vous aidera à comprendre comment fonctionne réellement le moteur d’exécution JavaScript que vous utilisez tous les jours dans votre vie.
Nous aborderons les composants JavaScript suivants :
- Moteur Javascript V8
- Environnement d’exécution JavaScript
- Pile d’appels JavaScript
- Mécanisme de concurrence et de boucle d’événements
Commençons par le moteur JavaScript V8.
Lis: Outils et bibliothèques HTML, CSS et JavaScript
Qu’est-ce que le moteur JavaScript V8 ?
Comme vous le savez peut-être déjà, JavaScript est un langage de programmation interprété. Un langage interprété signifie que le code n’est pas compilé en code binaire avant d’être exécuté. Alors maintenant, la question se pose : comment les ordinateurs exécutent-ils ces scripts de texte ? Pour JavaScript, cette exécution de code est une gracieuseté du moteur JavaScript. Vous pouvez considérer le moteur JavaScript comme un outil qui exécute le code JavaScript afin qu’il n’ait pas besoin d’être interprété pour que l’ordinateur exécutant le code le comprenne. L’un des avantages de cette méthode est qu’elle rend JavaScript indépendant de la plate-forme, ce qui signifie qu’elle peut s’exécuter sur n’importe quel système d’exploitation ou plate-forme.
Le moteur JavaScript est intégré à tous les navigateurs Internet modernes. Alors, comment fonctionne le moteur JavaScript ? Lorsqu’un fichier JavaScript est chargé dans le navigateur, le moteur JavaScript exécute chaque ligne de code une par une. Il analyse chaque ligne de code de haut en bas, les convertit en code binaire, puis les exécute sur le navigateur.
Chaque navigateur a son propre moteur JavaScript, mais l’un des moteurs JavaScript les plus connus est le moteur Chrome V8. La liste suivante montre certains des navigateurs et leur moteur JavaScript respectif :
- Google Chrome : V8
- Safari : JavaScriptCore
- Mozilla Firefox : Singe-araignée
- Microsoft Edge : chakra
Le moteur JavaScript se compose de deux composants :
Un moteur JavaScript contient mémoire de tas et un pile d’appels. Une pile d’appels est l’endroit où notre code s’exécute. La mémoire de tas est un pool de mémoire non structuré contenant les objets dont nous avons besoin dans notre programme.
Lis: Introduction à TypeScript et à ses fonctionnalités
Qu’est-ce que l’environnement d’exécution JavaScript ?
Dans la section précédente, nous avons discuté du moteur JavaScript, mais le moteur JavaScript ne s’exécute pas de manière isolée. Il s’exécute à l’intérieur du moteur d’exécution JavaScript (JRE), avec d’autres composants.
C’est le JRE qui rend le JavaScript asynchrone et permet aux développeurs Web de faire des requêtes HTTP de manière asynchrone. JRE se compose de plusieurs composants :
-
- Moteur JavaScript
- API Web
- File d’attente de rappel
- Boucle d’événement
- Tableau des événements
Qu’est-ce que la pile d’appels en JavaScript ?
JavaScript est un langage de programmation à thread unique, ce qui signifie qu’il a une seule pile d’appels ; Par conséquent, il ne peut faire qu’une seule chose à la fois. La pile d’appels est un programme qui enregistre où nous en sommes dans le programme (par exemple, si nous entrons dans une fonction, cette fonction sera poussée vers le haut de la pile et si nous revenons d’une fonction, cette fonction sera supprimée du haut de la pile).
Regardons un exemple de pile d’appels JavaScript :
function addition(x, y) {
return x + y;
}
function findSum(x, y) {
var result = addition(x, y);
console.log(result);
}
findSum(7,5);
Lorsque vous exécutez le programme ci-dessus, le moteur JavaScript commence à exécuter le code. Initialement, la pile d’appels sera vide et, par la suite, les étapes impliquées dans le processus seront telles que décrites dans le diagramme suivant :
Chaque valeur que vous voyez dans la pile d’appels est appelée ‘Cadre de pile‘.
JavaScript exécute le code sur un seul thread. L’exécution de code sur un seul thread peut être assez facile car vous n’avez pas à gérer certains des scénarios complexes que vous auriez à gérer dans un environnement multithread, tels que le blocage, la sécurité des threads, le pool de threads, etc. Garder à l’esprit que l’exécution à thread unique présente des avantages ainsi que des limites. Nous aborderons brièvement certaines de ces limitations dans la section suivante.
Lis: Dix façons d’utiliser AngularJS
Modèle de concurrence JavaScript et boucle d’événements
Le problème avec une application à thread unique est que, s’il y a trop de fonctions à exécuter dans la pile d’appels, le navigateur se bloque et le navigateur ne peut rien faire. Il ne peut pas exécuter de code supplémentaire ni afficher quoi que ce soit entre-temps. Cela pourrait être un problème sérieux du point de vue de l’utilisateur final. Personne ne veut que ses utilisateurs soient bloqués lorsqu’un traitement en arrière-plan est en cours sur une page Web.
Ce n’est pas le seul problème avec un environnement à thread unique, mais il y a un problème plus critique qui survient lorsque le navigateur ne répond plus. Une fois que votre navigateur commence à traiter autant de tâches dans la pile d’appels, il ne répond plus pendant un certain temps. Dans un tel cas, le navigateur demande généralement à l’utilisateur s’il souhaite fermer la page Web. Cela non plus n’est pas une condition idéale pour l’expérience utilisateur, n’est-ce pas ?
Alors, comment pourrions-nous exécuter plusieurs tâches en arrière-plan sans bloquer l’interface utilisateur, tout en rendant le navigateur insensible ?
Eh bien, la solution à ce problème est connue sous le nom de Rappel asynchrone. La programmation asynchrone est un sujet tellement vaste que je ne peux pas l’expliquer en profondeur dans cet article. Cependant, si vous voulez en savoir plus sur le fonctionnement du rappel asynchrone en JavaScript, vous pouvez consulter cet article : Programmation asynchrone en JavaScript
Conclusion de la vue d’ensemble du moteur JavaScript
C’était la première partie de la série À l’intérieur du moteur JavaScript, qui couvre les aspects du fonctionnement de JavaScript dans les coulisses. Dans la deuxième partie de la série, nous entrerons plus en détail sur le moteur JavaScript lui-même.
En savoir plus sur la programmation JavaScript et les didacticiels de développement Web.