O event loop do JavaScript: tasks, microtasks e renderização

O que é

Um agente JavaScript é uma única thread: cada job é executado até o fim antes que o próximo comece. Por isso, um laço síncrono longo bloqueia cliques, timers e a pintura da tela até terminar (MDN, modelo de execução). O event loop do padrão HTML divide o trabalho enfileirado em tasks (timers, conclusões de I/O, eventos, execução de scripts) e microtasks (reações de promises, queueMicrotask, callbacks de MutationObserver). Depois de cada task, o navegador executa um microtask checkpoint: a fila de microtasks é esvaziada por completo, inclusive as microtasks adicionadas durante o próprio esvaziamento, antes de a próxima task ser tomada ou de ocorrer uma oportunidade de renderização. O await agenda o restante de uma função assíncrona como uma microtask.

Por que importa

As surpresas de ordem de execução vêm desse modelo. console.log(1); setTimeout(() => console.log(2)); Promise.resolve().then(() => console.log(3)); console.log(4); imprime 1, 4, 3, 2: primeiro o código síncrono, depois as microtasks e, por fim, a task do timer. Um laço que agenda microtasks continuamente nunca deixa a página ser pintada, enquanto o trabalho dividido em tasks dá a vez ao navegador entre os blocos. Métricas de responsividade como o INP refletem por quanto tempo o loop permanece ocupado em torno de uma interação.

Como aplicar

• Mantenha cada task curta: divida laços pesados de CPU em blocos e ceda a vez entre eles com uma pausa baseada em task, por exemplo await new Promise(r => setTimeout(r)), para que a entrada e a renderização possam ser processadas.
• Mova cálculos realmente pesados para um Web Worker; a thread principal apenas envia mensagens.
• Use queueMicrotask quando algo precisar rodar depois do código síncrono atual, mas antes de qualquer outra coisa (agrupar várias chamadas síncronas em uma única atualização); isso não dá a vez ao navegador.
• Não interprete setTimeout(fn, 0) como "imediatamente": ele roda depois de todas as microtasks pendentes e não antes da próxima task.
• Trate await dentro de um laço como execução sequencial; inicie primeiro as promises independentes e depois use await Promise.all(...).
• No Node.js existe uma fila adicional, process.nextTick; consulte a documentação antes de depender da ordem entre ela e as reações de promises.

Armadilhas

Uma exceção lançada dentro de uma task encerra somente essa task; o loop continua, o que torna fácil deixar erros passarem despercebidos sem um handler global. Os event handlers rodam como parte do dispatch, então um handler de clique lento atrasa a resposta visual a esse clique. Microtasks enfileiradas por um MutationObserver podem observar um estado do DOM que nunca chegou a ser pintado. Os navegadores limitam e reduzem a frequência dos timers em abas em segundo plano, portanto a lógica de temporização não deve presumir atrasos exatos.