Comment JavaScript fonctionne dans les coulisses ?

Approfondissons et comprenons l'exécution de JavaScript dans le moteur du navigateur :

Comme nous le savons tous, JavaScript est un langage de programmation monothread de haut niveau, orienté objet, interprété ou compilé juste-à-temps, avec des fonctions de première classe et un modèle de concurrence de boucle d'événement non bloquant.

Et il devient de plus en plus populaire de jour en jour. Cet article est destiné à approfondir JavaScript et son fonctionnement réel.

Aperçu

Cet article de blog est convivial pour les débutants et également utile pour les développeurs JS expérimentés.
Nous allons passer en revue tous ces concepts en détail et expliquer comment JavaScript fonctionne réellement.

Dans cet article, nous aborderons le contexte d'exécution (phase de création de mémoire et phase d'exécution de code), l'exécution de CallStack et le moteur JavaScript, ainsi que son environnement d'exécution. Comprenez également le concept de boucle d'événements et de Stack Flow.

Ce sera une vue d'ensemble de tous les composants de base impliqués dans l'exécution du script.
Nous aborderons ici les composants suivants :

1. Moteur JavaScript.
2. Environnement d'exécution JavaScript.
3. Contexte d'exécution.
4. Appelez Stack Execution & Stack Flow.
5. Boucle d'événement.

Comme vous l'avez peut-être déjà entendu, JavaScript est un langage de programmation interprété . Cela signifie que le code source n'est pas compilé en code binaire avant l'exécution.
Cela signifie qu'il s'exécute ligne par ligne, mais ce n'est pas vrai à 100 %.
JS est un langage compilé juste à temps (JIT), ce comportement moderne le rend rapide dans les applications Web, sinon, selon le type interprété, il rend l'application lente à rendre. Nous considérons donc que JS est un langage de compilation juste-à-temps (JIT).

Le moteur JavaScript est simplement un programme informatique qui exécute du code JavaScript. Les moteurs JavaScript sont aujourd'hui intégrés à tous les navigateurs modernes.

Comme : (Peu de moteurs sont)
# V8 est le moteur JavaScript pour Chrome.
# Singe araignée pour Mozilla Firefox.
# Chakra pour Microsoft Edge.
# Noyau JavaScript pour Safari et ainsi de suite.

Comme nous le savons, le moteur de navigateur Chrome "V8" est très populaire pour JavaScript,
il se compose de deux composants principaux :
1 : Call Stack ( discutez plus tard en détail, soyez patient.. )
2 : Heap : c'est un espace mémoire non structuré où tous les objets utiles sont stocké.

L'environnement d'exécution JavaScript (JRE) :

Comme nous en avons discuté à propos du moteur JS, mais le moteur JS fonctionne à l'intérieur de JRE avec d'autres composants. comme certaines requêtes et appels asynchrones.
Les composants sont répertoriés comme suit :

1. Moteur JS
2. API Web
3. File d'attente de rappel ou file d'attente de messages
4. Boucle d'événement

Lorsque le code JS est exécuté, un contexte d'exécution global (GEC) est créé.
Cette exécution est créée en 2 phases :
1 : Phase de création de la mémoire &
2 : Phase d'exécution du code.

Prenons un exemple ;

Pour cet extrait de code ci-dessus, tout d'
abord, GEC est créé et dans lequel la phase de mémoire est créée et attribue une valeur indéfinie pour toutes les variables et place le bloc de fonction entier {} en tant que valeur fnxn dans son espace mémoire.

Deuxièmement, maintenant dans la 2ème phase, c'est-à-dire la phase d'exécution du code, il commence à parcourir tout le code ligne par ligne.
Et il a trouvé var a = 3, donc il attribue 3 à une variable qui n'était pas définie , et
passe à la ligne suivante et attribue 4 à la variable b qui n'était pas définie. Maintenant, passez à la ligne suivante pour la fonction add(), il n'y a rien à exécuter, il reste donc le même et passez à la ligne suivante pour var c.

Sur cette ligne, un nouveau contexte d'exécution est créé, nommé comme contexte d'exécution local pour la fonction add(3,4), maintenant à nouveau 2 phases créées,
pour la phase de création de mémoire , il affecte undefined pour les variables num1, num2 & result. Puis en phase d'exécution du code , il démarre ligne par ligne dans le bloc fonction { } de add().
Il a trouvé attribuer 3 pour num1 et 4 pour num2,
puis pour var result = num1 + num2, et attribuer 7 comme variable de résultat.
Après ce résultat de retour, et le contrôle de l'exécution revient à la ligne 9 à
var c = 7.

Lorsque le mot-clé de retour est rencontré, il renvoie le contrôle à la ligne appelée et le contexte d'exécution de la fonction est également supprimé.
Il passe à la ligne suivante, la ligne 10 : il console la valeur de c.

C'est ainsi que le contexte d'exécution fonctionne vraiment dans les coulisses.

Javascript gère la création et la suppression du contexte d'exécution du code à l'aide de Call Stack ( nous parlerons plus tard de la pile d'appels )

Pile d'appel :

Call Stack maintient l'ordre d'exécution des contextes d'exécution . Il est également connu sous le nom de pile de programme, pile de contrôle, pile d'exécution, pile de machine, pile de contexte d'exécution.
Et nous savons que JS est un langage de programmation à thread unique , ce qui signifie qu'il a une seule pile et exécute une ligne à la fois.

Il suffit de prendre la référence de code ci-dessus et d'expliquer comment la pile d'appels fonctionne pour le même extrait de code.

Ici, GEC créé et tombe dans la pile, puis le contexte d'exécution local suivant apparaît dans la pile, puis après l'exécution, il ressort et revient à GEC.
Ensuite, console.log(c) apparaît et après l'exécution, il apparaît, puis revient à GEC. Une
fois cette exécution terminée, GEC est également extrait de la pile et la pile devient vide en tant que condition IDLE.

Boucle d'événement :

Le langage JavaScript peut également être vu de deux manières : synchrone et asynchrone.

Dans JS synchrone, le code s'exécute ligne par ligne, ce qui signifie de manière séquentielle, &
Dans JS asynchrone, rien n'est séquentiel, ce qui signifie qu'une ligne de codes sera ignorée et exécutée plus tard selon le comportement principalement connu sous le nom d'API Web.

Ainsi, la boucle d'événements est utilisée pour gérer la partie asynchrone avec la file d'attente de rappel et attendre que la pile se vide, puis elle est envoyée à la pile pour exécution.

Event Loop est une fonctionnalité de JS qui vérifie en permanence si la pile principale est vide. Et lorsqu'il est vide, il vérifie la file d'attente de rappel. S'il y a des codes dans la file d'attente à exécuter, ils sont transférés un par un vers la pile d'appels. Une fois le code exécuté, il quitte la pile et le suivant dans la file d'attente apparaît jusqu'à ce que la file d'attente soit vide.

Les gars, résumons les choses et reprenons-nous dans les prochains articles……….