0Pricing
Frontend Academy · Aula

O loop de eventos: pilha de chamadas fila microtarefas

Visualize como o JavaScript é executado: a pilha de chamadas, a fila de tarefas, as microtarefas de Promises e por que a interface nunca bloqueia durante operações assíncronas.

O loop de eventos: pilha de chamadas fila microtarefas é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.

JavaScript é executado em uma única thread

JavaScript é executado em uma única thread — só pode executar uma parte do código por vez. Ainda assim, lida com milhares de operações assíncronas (solicitações de rede, temporizadores e eventos da interface) sem bloquear a execução. Como? Por meio do loop de eventos.

A pilha de chamadas

A pilha de chamadas é onde JavaScript acompanha qual função está sendo executada. Quando uma função é chamada, um registro é empilhado. Quando ela retorna, o registro é removido. Se a pilha ficar cheia (por recursão infinita), ocorrerá um estouro da pilha.

function c() { /* does something */ }
function b() { c(); }
function a() { b(); }
a();

// Call stack during c():
// c    ← top
// b
// a
// (anonymous)

APIs da Web — delegando trabalho

Quando JavaScript chama uma função assíncrona (setTimeout, fetch, addEventListener), o trabalho é delegado a uma API da Web no navegador. O mecanismo JS continua com a linha seguinte — não espera.

console.log('1');
setTimeout(() => console.log('2'), 0); // handed to Web API
console.log('3');
// Output: 1, 3, 2

A fila de tarefas (fila de macrotarefas)

Quando uma operação da API Web é concluída (o temporizador dispara ou uma requisição é resolvida), a função de retorno é colocada na fila de tarefas (fila de macrotarefas). O loop de eventos move a função de retorno para a pilha de chamadas somente quando a pilha está vazia.

A fila de microtarefas

As promessas usam uma fila de microtarefas — uma fila de alta prioridade. Depois que cada tarefa é concluída e antes que a próxima tarefa seja iniciada, todas as microtarefas pendentes são esvaziadas. As microtarefas sempre são executadas antes da próxima macrotarefa.

console.log('1');
setTimeout(() => console.log('timeout'), 0);  // macrotask
Promise.resolve().then(() => console.log('promise')); // microtask
console.log('2');
// Output: 1, 2, promise, timeout

O loop de eventos em ação

O algoritmo do loop de eventos: 1) execute a tarefa atual da pilha de chamadas até ela ficar vazia. 2) Esvazie toda a fila de microtarefas. 3) Opcionalmente, renderize a interface. 4) Escolha a próxima macrotarefa e repita.

queueMicrotask()

queueMicrotask(fn) agenda uma função de retorno na fila de microtarefas sem criar uma promessa. Raramente é necessário usá-la diretamente, mas é útil para entender como as bibliotecas implementam o agendamento.

queueMicrotask(() => console.log('microtask'));
console.log('sync');
// Output: sync, microtask

Por que tarefas longas congelam a interface

Se uma tarefa síncrona for executada por tempo demais (por exemplo, um loop apertado processando muitos dados), o loop de eventos não conseguirá processar eventos da interface nem renderizações. Isso congela a página. Divida o trabalho longo em partes usando setTimeout para devolver o controle ao loop de eventos.

// Bad — blocks the UI for seconds:
for (let i = 0; i < 10_000_000; i++) { /* heavy work */ }

// Better — yield periodically:
async function processInChunks(items) {
  for (let i = 0; i < items.length; i++) {
    process(items[i]);
    if (i % 100 === 0) await new Promise(r => setTimeout(r, 0)); // yield
  }
}

Linhas de execução da Web — Paralelismo verdadeiro

Para trabalhos que exigem muito da CPU, use uma linha de execução da Web — uma linha de execução separada com seu próprio loop de eventos. As linhas de execução se comunicam com a linha principal por meio de postMessage. Não há memória compartilhada nem condições de corrida.

requestAnimationFrame

requestAnimationFrame(callback) agenda uma função de retorno antes do próximo redesenho do navegador. Use-o para animações controladas por JavaScript — ele se sincroniza com a taxa de atualização da tela (normalmente 60 quadros por segundo).

function animate(timestamp) {
  // update positions based on timestamp
  element.style.transform = `translateX(${timestamp * 0.1 % 400}px)`;
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

Visualizando o loop de eventos

A demonstração interativa em latentflip.com/loupe permite colar código e observar a pilha de chamadas, a API Web, a fila de tarefas e o loop de eventos em câmera lenta. É essencial para desenvolver a intuição.

Verificação rápida

Depois que uma promessa é resolvida, em qual fila é executada sua função de retorno .then()?

Recapitulação: o loop de eventos

JavaScript usa uma única linha de execução. O trabalho assíncrono é encaminhado às APIs Web. As funções de retorno retornam pela fila de tarefas (setTimeout e funções de retorno de requisições) ou pela fila de microtarefas (promessas). O loop de eventos esvazia as microtarefas depois de cada tarefa, antes da próxima renderização ou macrotarefa. Código síncrono longo bloqueia tudo.

Perguntas Frequentes

A aula “O loop de eventos: pilha de chamadas fila microtarefas” é grátis?

Sim — o texto completo de “O loop de eventos: pilha de chamadas fila microtarefas” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.

O que vou aprender em “O loop de eventos: pilha de chamadas fila microtarefas”?

Visualize como o JavaScript é executado: a pilha de chamadas, a fila de tarefas, as microtarefas de Promises e por que a interface nunca bloqueia durante operações assíncronas. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Frontend Academy?

Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “O loop de eventos: pilha de chamadas fila microtarefas”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Frontend Academy?

Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. O loop de eventos: pilha de chamadas fila microtarefas
  2. Callbacks e callback hell
  3. Promises: then catch finally Promise.all
  4. async/await e tratamento de erros
← Voltar para Frontend Academy