Aula 72 — Microtasks e Macrotasks

Na aula anterior, entendemos o papel do Event Loop e como ele organiza a execução do JavaScript.

Agora vamos dar um passo além e responder:

quando existem várias tarefas esperando, quem executa primeiro?

A resposta envolve dois tipos de filas:

• Microtasks
• Macrotasks

🎯 Objetivo da aula

Ao final desta aula, você será capaz de:

• Entender o que são microtasks e macrotasks
• Saber a prioridade entre elas
• Prever a ordem de execução do código
• Evitar armadilhas comuns com Promises e timeouts

O modelo completo de execução

Agora o modelo mental fica assim:

• Call Stack → executa código síncrono
• Microtask Queue → prioridade alta
• Macrotask Queue → prioridade menor
• Event Loop → gerencia tudo

O que são Macrotasks?

Macrotasks são tarefas “maiores”, como:

• setTimeout
• setInterval
• Eventos do DOM
• Mensagens de timers

Elas entram na Macrotask Queue.

O que são Microtasks?

Microtasks são tarefas de alta prioridade, como:

• Promise.then
• Promise.catch
• queueMicrotask

Elas entram na Microtask Queue.

Exemplo comparativo

 
  console.log("Início");
  setTimeout(() => 
  {
    console.log("Macrotask");
  }, 0);
  Promise.resolve().then(() => 
  {
    console.log("Microtask");
  });
  console.log("Fim");

Qual será a ordem?

 
  console.log("Início"); // Saída: Início
  console.log("Fim");
  // Saída: Fim
  // Microtasks primeiro
  // Saída: Microtask
  // Depois as macrotasks
  // Saída: Macrotask

Por que a microtask vem antes?

Após o Call Stack ficar vazio:

• O Event Loop verifica a Microtask Queue
• Executa todas as microtasks
• Só então pega a próxima macrotask

Essa regra garante consistência em Promises.

Exemplo com múltiplas microtasks

 
  Promise.resolve().then(() => { console.log("Microtask 1"); });
  Promise.resolve().then(() => 
  {
    console.log("Microtask 2");
  });
  setTimeout(() => 
  {
    console.log("Macrotask");
  }, 0);

 
  Promise.resolve().then(() => 
  { 
    console.log("Microtask 1"); 
  }); // Saída: Microtask 1
  Promise.resolve().then(() => 
  {
    console.log("Microtask 2");
  });
  // Saída: Microtask 2
  setTimeout(() => {
    console.log("Macrotask");
  }, 0);
// Saída: Macrotask

⚠️ Cuidado com loops de microtasks

Criar microtasks continuamente pode bloquear o Event Loop.

 
  function loopMicrotask() 
  { 
    Promise.resolve().then(loopMicrotask); 
  }
  loopMicrotask();

Regra de ouro

Sempre lembre:

• Código síncrono → Call Stack
• Microtasks → prioridade máxima
• Macrotasks → depois

Na próxima aula, vamos aplicar tudo isso em exemplos reais com Promises e async/await, consolidando de vez o entendimento da assincronicidade.