O que são tarefas macro e micro?

As tarefas macro são etapas grandes e de alto nível no processo do navegador, como análise de HTML, construção do DOM, construção do CSSOM, cálculo de estilos, construção da árvore de renderização, layout, pintura e composição. Elas formam o pipeline principal.

As micro tarefas são ações menores e detalhadas que são realizadas após a conclusão da tarefa macro atual e antes do início da próxima. Incluem o tratamento de promessas (Promise), MutationObserver, queueMicrotask.

A diferença chave é que as micro tarefas sempre são executadas imediatamente após a tarefa macro atual, enquanto a próxima tarefa macro (por exemplo, o próximo quadro de renderização ou o tratamento do evento de temporizador setTimeout) só é executada após a fila de micro tarefas estar vazia.

Exemplo de ordem de execução:

// Tarefa macro (código inicial)
console.log('Início');

// Tarefa macro (temporizador)
setTimeout(() => {
  console.log('Temporizador');
}, 0);

// Micro tarefa (promessa)
Promise.resolve().then(() => {
  console.log('Promessa');
});

// Tarefa macro (fim do código inicial)
console.log('Fim');

Saída no console:

Início
Fim
Promessa
Temporizador

Ordem de execução:

1. A tarefa macro inicial (script principal) é executada.
2. console.log('Início').
3. setTimeout coloca a tarefa macro na fila.
4. Promise.resolve().then() coloca a micro tarefa na fila.
5. console.log('Fim').
6. A tarefa macro principal termina.
7. A fila de micro tarefas é verificada: a micro tarefa Promise.resolve().then() é executada.
8. console.log('Promessa').
9. A fila de micro tarefas está vazia.
10. O navegador processa as tarefas no ciclo de eventos, passa para a próxima tarefa macro.
11. A tarefa macro de setTimeout é processada.
12. console.log('Temporizador').
13. A tarefa macro termina.

Este entendimento é importante para gerenciar a ordem de execução de operações assíncronas e compreender como funciona o Event Loop.