Comment le moteur JavaScript fonctionne

Aujourd’hui, vous comprendrez une fois pour toutes les œuvres de la manière dont le moteur JavaScript fonctionne pour que vous sachiez ce qui se passe avec chaque ligne de code que vous écrivez sur votre projet.

Commençons! 👩💻

Moteurs

Les moteurs sont des programmes responsables de la conversion de code de niveau élevé (JavaScript, Python, C) en code de bas niveau (code machine, bytecode). Chaque navigateur a son propre moteur à compiler et à interpréter JavaScript:

• Moteur V8 (Google Chrome), qui est également un moteur nœud.js (dans ce que nous allons baser pour l’explication).
• Singe d’araignée (Mozilla Firefox).
• Chakra (Microsoft Edge).
• JavaScriptcore (Apple Safari).

Le Arrivée de V8 et son importance

Le 2 septembre 2008, la première version du moteur V8 a été lancée, sans savoir tout ce qui allait être le grand changement de l’interprétation de JavaScript dans le navigateur, cela arrêterait d’être aussi lent que c’était.

Comment l’ont-ils fait?
Parmi toutes les raisons, la principale est dans les concepts du compilateur et d’interprète.

Le compilateur est le programme chargé de convertir le code écrit en une langue de programmation vers un autre langage de programmation de bas niveau. Par exemple, le compilateur V8 est responsable de la transformation JavaScript en byTecode, puis sur le code de la machine.

D’autre part, l’interprète est responsable de la vérification du code de ligne par ligne et de l’exécuter directement sur la machine de destin. Il convient de noter que les interprètes effectuent également un travail de traduction ainsi que des compilateurs.

Comprendre comment V8 fonctionne

Image prise du cours professionnel JavaScript à Platzi.

quand il arrive Un script de navigateur Le moteur V8 commence un processus qui consiste en:

1. Recevez le code JavaScript sous forme de flux d’octets UTF-16 et transmettez-le sur un décodeur d’écoulement d’octet (qui fait partie du moteur) .
2. Parsear (transformer) le code et le décomposez-le dans les jetons (les jetons sont des éléments JS tels que: Let, nouveaux, symboles d’opérations, fonctions, promesses).
3. Merci à L’analyse précédente, une structure d’arborescence est générée sous la forme d’une arborescence ou de syntaxe abstraite (AST). V8 a deux types de pauses que vous verrez ci-dessous.
4. L’interprète exécute l’AST et génère le bytecode.
5. Après avoir joué à tous le code, les données de profilage évaluent le bytecode plusieurs fois plus encore et de cette façon, découvrez que vous pouvez vous envoyer au compilateur d’optimisation, qui est responsable de l’optimisation du code bytecode au code de la machine et de remplacer ainsi le code de base pour exécuter le code JavaScript plus rapidement et utilisez moins de ressources.

Le compilateur d’optimisation trouve les points où le code peut être optimisé. Optimise normalement le code qui est répété plusieurs fois. Si l’opération change pour une raison quelconque, le code revient à la version précédente (la des-optimisée). Ceci est fait pour consommer moins de ressources et exécuter donc le code plus rapide.

Par exemple, ce code peut être optimisé:

« 30235AB5ae »>

Entrez le mode FullScreen Mode FullScreen

Lorsque ce code fonctionne environ 50 fois, il sera prêt à être optimisé car les données de profilage qu’il sait qu’il ne sera pas Changement.

Si le code est modifié pour une raison quelconque de la raison pour laquelle le code est modifié pour une raison quelconque:

« 50596fe409″>

Entrez la sortie du mode Fullcreen Mode plein écran

retournera à votre version précédente.

Types de pauses

1. ESPAIRE PARSING:
   • Trouver des erreurs de syntaxe.
   • crée l’AST.
   • construit des étendues.
2. paresseux analyse:
   • Double rapidement que le désireux.
   • ne crée pas l’AST.
   • construit des cultures partiellement.

Le processus d’analyse fait partie de 15% à 20% du processus d’exécution, vous devez donc être pris en compte .

Différences entre moteurs

Les moteurs des autres navigateurs ont presque le même processus d’exécution du moteur V8 comme celui-ci. Ils n’ont que quelques petites différences. Comme par exemple dans les couches d’optimisation:

• Moteur V8 (Chrome): 1 couche d’optimisation unique.
• Singe d’araignée (Firefox): Il a 2 couches d’optimisation.
• chakra (bord): il a 2 couches d’optimisation.
• JavaScriptcore (Safari): Il dispose de 3 couches d’optimisation.

celles de 2 -3 couches fonctionnent un peu plus lente mais optimisent plus rapidement.

conclure

C’est ça! C’est ainsi que le moteur JavaScript V8 fonctionne développé pour le navigateur Chrome.

N’oubliez pas de vous pratiquer et de vous voir dans le prochain message 🚀

Couverture Couverture Courtoisie de MIDU.Dev. Pour plus de crédits, veuillez me contacter.