Como funciona o RunTime do JavaScript


Veja uma breve descrição de como o JavaScript utiliza a estrutura de Pilha e Fila para ordenar a execução síncrona das funções de seus websites e aplicativos.

 

 A Pilha de Chamadas (Call Stack) 

A Pilha de Chamadas monitora quais funções estão atualmente ativas e sendo processadas.

A Pilha de Chamadas funciona da seguinte maneira:

  • Quando uma função é executada, ela é empilhada (push) na pilha.
  • Quaisquer funções adicionais chamadas dentro da função são empilhadas (push) em cima da função original.
  • Quando a função termina sua execução, ela é desempilhada (pop) e a próxima função é executada.

Veja como a Pilha de Chamadas mantem controle da ordem das funções que são chamadas.

function funcA(){
   funcB();  
}

function funcB(){
   funcC();
}

function funcC(){
    console.log(Error().stack); //Error: Aqui é apenas usado para mostrar a pilha.
}

funcA();

/*Saida da tela de console
"Error
    at funcC (example.js:15:17) <-- funcC está no topo da pilha pois foi chamada por último.
    at funcB (example.js:12:5)
    at funcA (example.js:9:5)   <-- funcA está no fundo da pilha pois foi chamada primeiro.
    at example.js:17:1"
*/

Stack Overflow

Se o número de chamadas crescer ao ponto de exceder a quantidade de memória alocada, um erro de Stack Overflow (estouro da pilha) ocorrerá. Isso normalmente ocorre quando uma função faz chamadas recursivas com um erro de lógica similar ao loop infinito.

Veja como esse erro pode ocorrer:

function funcA(){
   funcA();  
}
funcA();

/*Causará um estouro de pilha pois ela chama a si mesma um número indeterminado de vezes.*/

O Loop e Fila de eventos

A Fila de eventos

A fila de eventos é uma fila que controla e registra quais tarefas estão aguardando para serem colocadas na pilha de chamadas para serem executadas. Tarefas são adicionadas a ela pela API Web que roda em paralelo com o run time do JavaScript.

Aqui estão 3 exemplos de APIs Web que adicionam tarefas a fila de eventos:

  • Timers – Timers agendam eventos para serem adicionados a fila de eventos.
  • DOM Event Handlers – Interações dos usuários como cliques do mouse e botões do teclado pressionados são gerenciados através da fila de eventos.
  • Requisições de Rede – Requisições de rede são pocessadas de forma assincrona e o resultado, após processado, é colocado na fila.

 

O Loop de Eventos

Quando a pilha de chamadas está vazia, ele tira a primeira tarefa da fila de eventos e começa a processá-la. Os itens restantes precisam aguardar o fim do processamento para que seja a vez deles, seguindo sempre a ordem da fila. Este ciclo chama-se Loop de Eventos.

Deixe um comentário