A maior característica do Java Script é que ele é single- thread . Single-thread significa que apenas uma coisa pode ser feita ao mesmo tempo. Por exemplo, em um DOM, para adicionar ou excluir elementos, só podemos adicionar e depois excluir eles, não ao mesmo tempo. Single thread significa que todas as tarefas precisam ser enfileiradas e a tarefa anterior só pode ser executada antes da próxima tarefa, o que pode levar a uma renderização de página inconsistente se o código for muito longo, renderização e bloqueio de carregamento, etc.
Para solucionar esse problema, o HTML5 propôs o padrão webworker, que permite que o Java Script crie múltiplas threads, para que haja uma sincronização e assincronia
Sincronizar:
Execute o código em sequência e execute a próxima tarefa após o término da tarefa anterior. A sequência de execução do programa é a mesma que a sequência de escrita do código.
assíncrono:
Se leva muito tempo para fazer uma coisa, você pode lidar com outras coisas primeiro. Por exemplo, quando cozinhamos, podemos cortar legumes quando a água estiver fervida e não precisamos esperar a água ferver antes cortar legumes.
Por exemplo neste código:
<script>
window.setTimeout(function(){
console.log(1);
},2000)
console.log(2);
</script>De acordo com a ideia de sincronização normal, definitivamente pensaremos que 1 é a saída primeiro e, em seguida, 2 é a saída sequencialmente, mas, na verdade, o resultado é que 2 é a saída primeiro e, em seguida, 1 é a saída. Isso ocorre porque o cronômetro é encontrado ao executar o código sequencialmente, e o tempo de espera é relativamente longo, portanto, o código a seguir é executado primeiro e, finalmente, o código na função de retorno de chamada do temporizador é executado, o que melhora muito a eficiência de execução do programa.
Processo de execução de tarefas síncronas e assíncronas:
Tarefas de sincronização : as tarefas de sincronização são executadas na thread principal , formando uma pilha de execução da thread principal
Tarefas assíncronas: As tarefas assíncronas geralmente são implementadas por meio de funções de retorno de chamada. As tarefas assíncronas geralmente têm os seguintes tipos: clique, mouseover, foco , etc. fila de tarefas. meio (ou fila de mensagens)
Portanto, o caso agora pode ser entendido simplesmente como a figura a seguir. O código é executado de forma síncrona primeiro. Depois de encontrar a função de retorno de chamada, a função de retorno de chamada é colocada na fila de tarefas e, em seguida, a tarefa é ignorada e o código a seguir é executado primeiro , esperando que o thread principal execute a pilha. Depois que todas as tarefas de sincronização forem executadas, vá para a fila de tarefas para encontrar a função de retorno de chamada não executada a ser executada. Essa abstração pode ser usada para abstrair a pilha de execução do thread principal como a via principal, a fila de tarefas como faixa de emergência e a função de retorno de chamada como o carro quebrado no meio do caminho. Sair da faixa principal não afeta o tráfego normal, espere na fila de tarefas para reparar veículos e depois dirija da faixa de emergência para a estrada principal. os veículos na pista principal foram embora.
Processo de execução de tarefas com várias funções de retorno de chamada:
Se houver várias funções de retorno de chamada, qual função de retorno de chamada é executada primeiro na fila de tarefas se torna um problema.Neste momento, o processamento de processo assíncrono é necessário.
<script>
document.addEventListener('click',function(){
console.log(1);
})
window.setTimeout(function(){
console.log(2);
},2000)
</script>Por exemplo, como nosso programa executa esse código? Na verdade, antes que a função de retorno de chamada seja passada para a fila de tarefas, ela é processada por um processo assíncrono. Somente quando for acionada ela será colocada na fila de tarefas. Se for clicado, sua função de retorno de chamada será colocada na fila de tarefas. Se não for clicada, não será colocada nela. Outro exemplo é o segundo cronômetro.Após dois segundos, sua função de retorno de chamada será colocada na fila de tarefas.
Depois que a thread principal termina, ela constantemente vai para a lista de tarefas para obter novas tarefas de função de retorno de chamada e, em seguida, as executa, obtém-nas e as executa novamente. Este estágio é chamado de event loop event loop