Como o loop de eventos funciona em JavaScript?

Embora possa exigir um entendimento aprofundado de linguagens como C ++ e C para escrever código de produção em larga escala, o JavaScript geralmente pode ser escrito com apenas um entendimento básico do que pode ser feito com a linguagem.


Conceitos, como passar retornos de chamada para funções ou escrever código assíncrono, geralmente não são tão difíceis de implementar, o que faz com que a maioria dos desenvolvedores de JavaScript se preocupe menos com o que acontece sob o capô. Eles apenas não se importam em entender as complexidades que abstraem profundamente deles pelo idioma.

Como desenvolvedor de JavaScript, torna-se cada vez mais importante entender o que realmente acontece sob o capô e como a maioria dessas complexidades abstraídas de nós realmente funciona. Isso nos ajuda a tomar decisões mais informadas, o que pode, por sua vez, aumentar drasticamente o desempenho do código.

Este artigo se concentra em um dos conceitos ou termos muito importantes, mas raramente entendidos, no JavaScript. o LOOP DE EVENTO!. 

A escrita de código assíncrono não pode ser evitada no JavaScript, mas por que um código executado de forma assíncrona realmente significa? isto é. O loop de eventos

Antes de entendermos como o loop de eventos funciona, primeiro precisamos entender o que é o próprio JavaScript e como ele funciona.!

O que é JavaScript?

Antes de prosseguirmos, gostaria que voltássemos ao básico. O que realmente é JavaScript? Poderíamos definir JavaScript como;

JavaScript é um idioma simultâneo, de alto nível, interpretado, sem bloqueio, assíncrono e simultâneo.

Espera, o que é isso? Uma definição de livresco? ��

Vamos dividir!

As palavras-chave aqui em relação a este artigo são rosca única, sem bloqueio, simultâneo, e assíncrono.

Linha única

Um encadeamento de execução é a menor sequência de instruções programadas que pode ser gerenciada independentemente por um planejador. Uma linguagem de programação é de thread único, podendo executar apenas uma tarefa ou operação por vez. Isso significa que ele executaria um processo inteiro do início ao fim sem que o encadeamento fosse interrompido ou parado.

Diferente das linguagens multithread, em que vários processos podem ser executados em vários threads simultaneamente, sem bloquear um ao outro.

Como o JavaScript pode ser de thread único e sem bloqueio ao mesmo tempo?

Mas o que significa bloquear?

Sem bloqueio

Não existe uma definição de bloqueio; simplesmente significa coisas que estão sendo executadas lentamente no thread. Portanto, sem bloqueio significa coisas que não são lentas no segmento.

Mas espere, eu disse que o JavaScript é executado em um único segmento? E eu também disse que não bloqueia, o que significa que a tarefa é executada rapidamente na pilha de chamadas? Mas como??? Que tal quando executamos temporizadores? rotações?

Relaxar! Descobriremos daqui a pouco “.

Concorrente

Simultaneidade significa que o código está sendo executado simultaneamente por mais de um thread.

Ok, as coisas estão ficando realmente esquisito agora, como o JavaScript pode ser de thread único e simultâneo? ou seja, executando seu código com mais de um encadeamento?

Assíncrono

Programação assíncrona significa que o código é executado em um loop de eventos. Quando há uma operação de bloqueio, o evento é iniciado. O código de bloqueio continua em execução sem bloquear o segmento de execução principal. Quando o código de bloqueio termina a execução, coloca na fila o resultado das operações de bloqueio e empurra-os de volta para a pilha.

Mas o JavaScript tem um único segmento? O que então executa esse código de bloqueio enquanto permite que outros códigos no thread sejam executados?

Antes de prosseguir, vamos recapitular o exposto acima.

  • JavaScript é de thread único
  • O JavaScript não bloqueia, ou seja, processos lentos não impedem sua execução
  • O JavaScript é simultâneo, ou seja, executa seu código em mais de um thread ao mesmo tempo
  • JavaScript é assíncrono, ou seja, executa código de bloqueio em outro lugar.

Mas o que foi dito acima não corresponde exatamente, como um idioma de thread único pode ser não-bloqueador, simultâneo e assíncrono?

Vamos aprofundar um pouco, vamos aos mecanismos de tempo de execução JavaScript, V8, talvez tenha alguns threads ocultos sobre os quais não estamos cientes.

Motor V8

O mecanismo V8 é um mecanismo de tempo de execução de montagem da Web de código aberto de alto desempenho para JavaScript escrito em C ++ pelo Google. A maioria dos navegadores executa JavaScript usando o mecanismo V8, e mesmo o popular ambiente de tempo de execução do nó js também.

Em inglês simples, o V8 é um programa C ++, que recebe código JavaScript, compila e executa.

O V8 faz duas coisas principais;

  • Alocação de memória heap
  • Contexto de execução da pilha de chamadas

Infelizmente, nossa suspeita estava errada. O V8 tem apenas uma pilha de chamadas, pense na pilha de chamadas como o encadeamento.

Uma thread === uma pilha de chamadas === uma execução de cada vez.

Imagem – Meio-dia dos hackers

Como a V8 possui apenas uma pilha de chamadas, como o JavaScript é executado simultaneamente e de forma assíncrona sem bloquear o encadeamento de execução principal?

Vamos tentar descobrir escrevendo um código assíncrono simples, mas comum, e analisá-lo juntos.

JavaScript executa cada código linha por linha, um após o outro (thread único). Como esperado, a primeira linha é impressa no console aqui, mas por que a última linha é impressa antes do código de tempo limite? Por que o processo de execução não espera o código de tempo limite (bloqueio) antes de executar a última linha?

Parece que algum outro encadeamento nos ajudou a executar esse tempo limite, pois temos certeza de que um encadeamento pode executar apenas uma única tarefa a qualquer momento.

Vamos dar uma espiada no Código-fonte V8 por um tempo.

Espere o que??!!! Não há funções de timer na V8, não há DOM? Sem eventos? Não tem AJAX? Yeeeeessss!!!

Eventos, DOM, temporizadores, etc. não fazem parte da implementação principal do JavaScript, o JavaScript está em conformidade estrita com as especificações dos Scripts da Ecma e várias versões são frequentemente referidas de acordo com as Especificações dos Scripts da Ecma (ES X).

Fluxo de trabalho de execução

Eventos, timers e solicitações Ajax são todos fornecidos no lado do cliente pelos navegadores e geralmente são chamados de API da Web. São eles que permitem que o JavaScript de thread único não seja bloqueador, simultâneo e assíncrono! Mas como?

Existem três seções principais no fluxo de trabalho de execução de qualquer programa JavaScript, a pilha de chamadas, a API da web e a fila de tarefas.

A pilha de chamadas

Uma pilha é uma estrutura de dados na qual o último elemento adicionado é sempre o primeiro a ser removido da pilha; você pode pensar nisso como uma pilha de uma placa na qual somente a primeira placa que foi a última adicionada pode ser removida primeiro. Uma pilha de chamadas é simplesmente uma estrutura de dados da pilha em que tarefas ou código estão sendo executados de acordo.

Vamos considerar o exemplo abaixo;

Fonte – https://youtu.be/8aGhZQkoFbQ

Quando você chama a função printSquare (), ela é empurrada para a pilha de chamadas, a função printSquare () chama a função square (). A função square () é empurrada para a pilha e também chama a função multiply (). A função de multiplicação é colocada na pilha. Como a função multiplicar retorna e é a última coisa que foi enviada à pilha, ela é resolvida primeiro e removida da pilha, seguida pela função square () e depois pela função printSquare ().

A API da Web

É aqui que o código que não é tratado pelo mecanismo V8 é executado para não “bloquear” o encadeamento principal de execução. Quando a pilha de chamadas encontra uma função de API da Web, o processo é imediatamente entregue à API da Web, onde está sendo executada e liberando a pilha de chamadas para executar outras operações durante sua execução..

Vamos voltar ao nosso exemplo setTimeout acima;

Quando executamos o código, a primeira linha console.log é empurrada para a pilha e obtemos nossa saída quase que imediatamente. Ao chegar ao tempo limite, os timers são manipulados pelo navegador e não fazem parte da implementação principal do V8, sendo empurrados para a API da Web, liberando a pilha para que ela possa executar outras operações.

Enquanto o tempo limite ainda está em execução, a pilha avança para a próxima linha de ação e executa o último console.log, o que explica por que obtemos essa saída antes da saída do timer. Quando o cronômetro estiver concluído, algo acontece. O console.log no temporizador aparece magicamente na pilha de chamadas novamente!

Quão?

O loop de eventos

Antes de discutirmos o loop de eventos, vamos primeiro analisar a função da fila de tarefas.

De volta ao nosso exemplo de tempo limite, quando a API da Web termina de executar a tarefa, ela não é enviada de volta automaticamente para a pilha de chamadas. Vai para o Fila de tarefas. 

Uma fila é uma estrutura de dados que funciona com o princípio Primeiro a entrar, de modo que, à medida que as tarefas são inseridas na fila, elas saem na mesma ordem. Tarefas que foram executadas pelas APIs da Web, que estão sendo enviadas para a Fila de tarefas, depois voltam para a Pilha de chamadas para obter o resultado impresso.

Mas espere. O QUE HECK É O LOOP DO EVENTO???

Fonte – https://youtu.be/8aGhZQkoFbQ

O loop de eventos é um processo que aguarda a pilha de chamadas ficar limpa antes de enviar retornos de chamada da fila de tarefas para a pilha de chamadas. Depois que a pilha está limpa, o loop de eventos dispara e verifica a fila de tarefas quanto a retornos de chamada disponíveis. Se houver, ele o envia para a Pilha de chamadas, aguarda a limpeza da pilha de chamadas novamente e repete o mesmo processo.

Fonte – https://www.quora.com/How-does-an-event-loop-work/answer/Timothy-Maxwell

O diagrama acima demonstra o fluxo de trabalho básico entre o loop de eventos e a fila de tarefas.

Conclusão

Embora esta seja uma introdução muito básica, o conceito de programação assíncrona em JavaScript fornece informações suficientes para entender claramente o que está acontecendo sob o capô e como o JavaScript é capaz de executar simultaneamente e de forma assíncrona com apenas um único encadeamento.

O JavaScript está sempre sob demanda e, se você estiver curioso para aprender, aconselho você a verificar isso Curso Udemy.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map