Como o mecanismo JavaScript funciona

Hoje você vai entender uma vez e por tudo que o mecanismo JavaScript funciona para que você saiba o que acontece com cada linha de código que você escreve em seu projeto.

Vamos começar! 👩💻

motores

Os programas são os que são responsáveis por converter o código de alto nível (JavaScript, Python, C) para código de baixo nível (código da máquina, bytecode). Cada navegador tem seu próprio motor para compilar e interpretar o JavaScript:

mecanismo v8 (Google Chrome), que também é um mecanismo node.js (nisso, baseijaremos para a explicação).
• macaco de aranha (Mozilla Firefox).
• chakra (Microsoft Edge).
• javascriptcore (maçã safari).

o Chegada de V8 e sua importância

em 2 de setembro de 2008, a primeira versão do motor V8 foi lançada, sem saber de tudo o que seria a grande mudança na interpretação do JavaScript no navegador, isso Pararia de ser tão lento quanto era.

Como eles fizeram isso? Entre todas as razões, o principal é nos conceitos do compilador e intérprete.

O compilador O programa é responsável pela conversão de código escrito em uma linguagem de programação para outra linguagem de programação de baixo nível. Por exemplo, o compilador V8 é responsável por transformar JavaScript para bytecode e, em seguida, para o código da máquina.

Por outro lado, o intérprete é responsável por verificar o código de linha por linha e executar diretamente na máquina de destino. Deve-se notar que os intérpretes também realizam algum trabalho de tradução, bem como compiladores.

Entendendo como o V8 funciona

Imagem tirada do curso profissional de JavaScript em Platzi.

quando chegar Um script do navegador O motor V8 inicia um processo que consiste em:

1. Receba o código JavaScript como um fluxo de byte utf-16 e passá-lo para um decodificador de fluxo de bytes (o que faz parte do motor) .
2. parsesear (transformar) o código e decomponha-o em tokens (os tokens são elementos JS como: deixe, novos, símbolos de operações, funções, promessas).
3. graças a A análise anterior, uma estrutura de árvore é gerada na forma de uma árvore, ou, árvore de sintaxe abstrata (AST). V8 tem dois tipos de pausas que você verá abaixo.
4. O intérprete executa o AST e está gerando o bytecode.
5. Depois de reproduzir todo o código, os dados de criação de perfil estão avaliando o bytecode vários Os tempos mais e dessa maneira, você pode enviar-lhe para o compilador otimizador, que é responsável por otimizar o código bytecode para o código da máquina e, assim, substituído, o código base executar o código JavaScript mais rápido e usar menos recursos.

O compilador de otimização encontra os pontos onde o código pode ser otimizado. Normalmente otimiza o código que é repetido várias vezes. Caso a operação muda por algum motivo, o código retorna à versão anterior (o des-otimizado). Isso é feito para consumir menos recursos e, portanto, execute o código mais rápido.

Por exemplo, este código pode ser otimizado:

Insira o modo de tela inteira Sair do modo de tela inteira

Quando esse código é executado cerca de 50 vezes, ele estará pronto para ser otimizado porque os dados de perfil que ele conhece não Alterar.

Se o código for alterado por qualquer motivo:

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

Insira a saída do modo de tela inteira Modo de tela cheia

Vai retornar à sua versão anterior.

Tipos de pausas

1. análise ansiosa:
   • encontrar erros de sintaxe.
   • cria a AST.
   • constrói escopos.
2. analising preguiçoso:
   • Duplo rapidamente do que o ansioso.
   • não cria a AST.
   • constrói parcialmente.

O processo de análise faz parte de 15% – 20% do processo de execução, para que você tenha que ser levado em conta .

Diferenças entre os motores

Os motores dos outros navegadores têm quase o mesmo processo de execução do motor V8 como eles foram criados a partir destes. Eles têm apenas algumas pequenas diferenças. Como por exemplo nas camadas de otimização:

• v8 motor (Chrome): 1 camada de otimização única.
• macaco de aranha (Firefox): Tem 2 camadas de otimização.
• chakra (borda): tem 2 camadas de otimização.
• javascriptcore (safari): tem 3 camadas de otimização.

os de 2 -3 camadas correm um pouco mais lento, mas otimizam mais rápido.

Concluindo

é isso! É assim que o mecanismo JavaScript V8 funciona desenvolvido para o navegador Chrome.

Não se esqueça de praticar e vê-lo na próxima postagem 🚀

Cover imagem cortesia de Midu.dev. Para mais créditos, entre em contato comigo.