Como o JavaScript funciona nos bastidores?

Nov 25 2022
Vamos nos aprofundar e entender a execução do JavaScript dentro do mecanismo do navegador: Como todos sabemos, o JavaScript é uma linguagem de programação de alto nível, baseada em protótipo, orientada a objetos, interpretada ou compilada just-in-time, de thread único, com funções de primeira classe e um modelo de simultaneidade de loop de eventos sem bloqueio. E está ficando cada vez mais popular a cada dia. Este artigo tem como objetivo aprofundar o JavaScript e como ele realmente funciona.

Vamos nos aprofundar e entender a execução do JavaScript dentro do mecanismo do navegador:

Como todos sabemos, JavaScript é uma linguagem de programação single-thread de alto nível, baseada em protótipo, orientada a objetos, interpretada ou compilada just-in-time, com funções de primeira classe e um modelo de simultaneidade de loop de eventos sem bloqueio.

E está ficando cada vez mais popular a cada dia. Este artigo tem como objetivo aprofundar o JavaScript e como ele realmente funciona.

Visão geral

Esta postagem no blog é amigável para iniciantes e também útil para desenvolvedores JS experientes.
Analisaremos todos esses conceitos em detalhes e explicaremos como o JavaScript realmente é executado.

Nesta postagem, discutiremos o contexto de execução (fase de criação de memória e fase de execução de código), execução de CallStack e mecanismo JavaScript e seu ambiente de tempo de execução. Além disso, entenda o conceito de loop de eventos e fluxo de pilha.

Esta será uma visão geral de todos os principais componentes envolvidos na execução do script.
Aqui vamos discutir os seguintes componentes:

  1. Mecanismo JavaScript.
  2. Ambiente de tempo de execução JavaScript.
  3. Contexto de Execução.
  4. Execução de pilha de chamada e fluxo de pilha.
  5. Circuito de eventos.

Como você pode ouvir antes, JavaScript é uma linguagem de programação interpretada . Isso significa que o código-fonte não é compilado em código binário antes da execução.
Isso significa que ele executa linha por linha, mas não é 100% verdadeiro.
JS é uma linguagem compilada just in time (JIT), esse comportamento moderno o torna rápido em aplicativos da web, caso contrário, conforme o tipo interpretado, torna o aplicativo lento para renderizar. Portanto, consideramos JS uma linguagem de compilação Just-in-time (JIT).

O mecanismo JavaScript é simplesmente um programa de computador que executa o código JavaScript. Os mecanismos JavaScript estão embutidos em todos os navegadores modernos hoje.

Como: (Poucos mecanismos são)
# V8 é o mecanismo JavaScript para Chrome.
# Macaco-aranha para Mozilla Firefox.
# Chakra para Microsoft Edge.
# Núcleo JavaScript para Safari e assim por diante.

Como sabemos, o mecanismo do navegador Chrome "V8" é muito popular para JavaScript.
Ele consiste em dois componentes principais:
1: Call Stack ( discutir mais tarde em detalhes, fique atento. )
2: Heap : É um espaço de memória não estruturado onde todos os objetos úteis são armazenado.

Tha JavaScript Runtime Environment (JRE):

Conforme discutimos sobre o mecanismo JS, mas o mecanismo JS é executado dentro do JRE junto com alguns outros componentes. como algumas solicitações e chamadas assíncronas.
Os componentes são listados como:

  1. Motor JS
  2. APIs da Web
  3. Fila de retorno de chamada ou fila de mensagens
  4. Loop de eventos
  5. Ambiente de tempo de execução do JavaScript

Quando o código JS é executado, um contexto de execução global (GEC) é criado.
Esta execução é criada em 2 fases:
1: Fase de criação de memória e
2: Fase de execução de código.

Vamos dar um exemplo;

É um trecho de código de 10 linhas.

Para este trecho de código acima,
primeiro, o GEC é criado e no qual a fase de memória é criada e atribui um valor indefinido para todas as variáveis ​​e coloca todo o bloco de funções {} como valor fnxn em seu espaço de memória.

Em segundo lugar, agora na 2ª fase, ou seja, na fase de execução do código, ele começa a percorrer todo o código linha por linha.
E encontrou var a = 3, então atribuiu 3 a uma variável que estava indefinida e
moveu para a próxima linha e atribuiu 4 à variável b que estava indefinida. Agora vá para a próxima linha para a função add(), não há nada para executar, então ela permanece a mesma e vá para a próxima linha para var c.

Fluxo do contexto de execução da criação

Nesta linha, um novo contexto de execução é criado, nome como contexto de execução local para a função add(3,4), agora novamente 2 fases criadas,
Para a fase de criação de memória , atribui indefinido para as variáveis ​​num1, num2 e resultado. Em seguida, na fase de execução do código , inicia-se linha por linha no bloco funcional { } de add().
Encontrou atribuir 3 para num1 e 4 para num2,
E então para var result = num1+num2, e atribuir 7 como na variável de resultado.
Após esse resultado de retorno, o controle da execução volta para a linha 9 em
var c = 7.

Quando a palavra-chave return é encontrada, ela retorna o controle para a linha chamada e também o contexto de execução da função é excluído.
Move-se para a próxima linha, linha 10: consola o valor de c.

É assim que o contexto de execução realmente funciona nos bastidores.

O Javascript gerencia a criação e exclusão do contexto de execução do código com a ajuda do Call Stack ( discutiremos mais tarde sobre o call stack )

Pilha de chamada:

Call Stack mantém a ordem de execução dos contextos de execução . Também é conhecido como Pilha de Programa, Pilha de Controle, Pilha de Tempo de Execução, Pilha de Máquina, Pilha de Contexto de Execução.
E sabemos que JS é uma linguagem de programação de thread único , significa ter uma única pilha e executar uma linha por vez.

Apenas pegando a referência de código acima e explicando como a pilha de chamadas funciona para o mesmo trecho de código.

Fluxo da Pilha de Chamadas

Aqui, o GEC foi criado e caiu na pilha, então o próximo contexto de execução local é pop-in para a pilha e, após a execução, ele sai e volta para o GEC.
Em seguida, o console.log(c) é exibido e, após a execução, é exibido e, em seguida, retorna ao GEC.
Depois que a execução é concluída, o GEC também é removido da pilha e a pilha fica vazia como uma condição IDLE.

Circuito de eventos:

A linguagem JavaScript também pode ser vista de duas maneiras — síncrona e assíncrona.

No JS síncrono, o código é executado linha por linha, o que significa de maneira sequencial, e
no JS assíncrono, nada é sequencial, o que significa que uma linha de códigos será ignorada e executada posteriormente de acordo com o comportamento conhecido principalmente como APIs da web.

Portanto, o loop de eventos é usado para lidar com a parte assíncrona com a fila de retorno de chamada e aguardar a pilha esvaziar e, em seguida, enviar para a pilha para execução.

Event Loop é um recurso em JS que verifica continuamente se a pilha principal está vazia. E quando está vazio, verifica a Fila de Callback. Se houver códigos na fila para serem executados, eles são transferidos um a um para a pilha de chamadas. Depois que o código é executado, ele sai da pilha e o próximo da fila sobe até que a fila fique vazia.

Pessoal, vamos encerrar as coisas e ver vocês nos próximos posts……….