Como funciona o motor de JavaScript

Hoxe vai entender unha vez por todas como funciona o motor JavaScript para que saiba o que ocorre con cada liña de código que escribe no seu proxecto.

Imos comezar! 👩💻

Motors

Os motores son aqueles programas que son responsables da conversión de código de alto nivel (JavaScript, Python, C) a código de baixo nivel (código de máquina, bytecode). Cada navegador ten o seu propio motor para compilar e interpretar JavaScript:

• V8 Engine (Google Chrome), que tamén é un motor node.js (neste imos basear a explicación).
• Spider Monkey (Mozilla Firefox).
• Chakra (Microsoft Edge).
• JavaScriptCore (Apple Safari).

o Chegada de V8 ea súa importancia

O 2 de setembro de 2008, lanzáronse a primeira versión do motor V8, sen coñecer todo o que ía ser o gran cambio na interpretación de JavaScript no navegador, este i deixaría de ser tan lento como era.

Como o fixeron?
Entre todos os motivos, o principal está no compilador e conceptos de intérprete.

o compilador é o programa encargado de converter o código escrito nunha linguaxe de programación a outra linguaxe de programación de baixo nivel. Por exemplo, o compilador V8 é responsable da transformación de JavaScript a Bytecode e despois ao código da máquina.

Por outra banda, o intérprete é responsable de comprobar o código de liña por liña e executalo directamente na máquina de destino. Cómpre salientar que os intérpretes tamén realizan algún traballo de tradución e compiladores.

Comprender como funciona V8

Imaxe tomada do curso profesional de JavaScript en Platzi.

cando chega Un script de navegador O motor V8 comeza un proceso que consta de:

1. Recibir o código JavaScript como un fluxo de bytes UTF-16 e pasalo a un descodificador de fluxo de bytes (que fai parte do motor) .
2. Parsear (transformar) o código e descompoñelo en tokens (os tokens son elementos JS, como: imos, novos, símbolos de operacións, funcións, promesas).
3. grazas a A análise anterior, unha estrutura de árbore xérase en forma de árbore, ou, árbore de sintaxe abstracta (AST). V8 ten dous tipos de pausas que verás a continuación.
4. O intérprete executa a AST e está a xerar o bytecode.
5. Despois de xogar todo o código, os datos de perfilación avalían o bytecode varios veces máis e deste xeito descobren que pode enviarlle ao compilador de optimización, que é responsable de optimizar o código Bytecode ao código da máquina e substituír o código base para executar o código JavaScript máis rápido e usar menos recursos.

O compilador de optimización atopa os puntos onde se pode optimizar o código. Normalmente optimiza o código que se repite varias veces. No caso de que a operación cambie por algún motivo, o código volve á versión anterior (o DES optimizado). Isto faise para consumir menos recursos e, polo tanto, executar o código máis rápido.

Por exemplo, este código pode ser optimizado:

Introduza o modo de pantalla completa Exit o modo de pantalla completa

Cando este código funcione preto de 50 veces, estará listo para ser optimizado porque os datos de perfilante que sabe que non o fará . mudanza

Se o código modificado por calquera motivo:

function add(a, b) { return a + b;}for(let i = 0; i < 1000; i++) { add(i, i)}add(1, "uno")

entrar fullscreen saír do modo de Modo de pantalla completa

volverá á súa versión anterior.

Tipos de pausas

1. Anexos de análise:
   • Buscar erros de sintaxe.
   • Crea a AST.
   • Construír ámbitos.
2. Parsing preguiceiro:
   • dobre rapidamente que o ansioso.
   • non crea a AST.
   • Construír os ámbitos parcialmente.

O proceso de análise é parte do 15% – 20% do proceso de execución para que teña que ter en conta .

Diferenzas entre motores

Os motores dos outros navegadores teñen case o mesmo proceso de execución do motor V8 que foron creados a partir deste. Só teñen algunhas pequenas diferenzas. Como por exemplo, nas capas de optimización:

• V8 (cromado): unha capa de optimización único
• mono de araña (Firefox): .. Ten 2 capas de optimización
• chakra (bordo): ten 2 capas de optimización.
• javascriptcore (safari): ten 3 capas de optimización.

aqueles de 2 -3 capas executan un pouco máis lentamente pero optimizan máis rápido.

concluír

É iso. Así é como funciona o motor de JavaScript V8 desenvolvido para o navegador Chrome.

Non te esquezas de practicar e verte no próximo post 🚀

Cubra a cortesía de Midu.Dev. Para máis créditos, póñase en contacto comigo.