Microtarefas em JavaScript

Em JavaScript, a fila de microtarefas é um componente essencial do modelo de execução assíncrona. Ela prioriza determinados callbacks, garantindo que sejam executados após o script atual, mas antes que o event loop continue com outras tarefas, como renderização ou tratamento de eventos do usuário. Este guia oferece uma análise aprofundada sobre como utilizar efetivamente a fila de microtarefas para aprimorar aplicações JavaScript.

Entendendo o Event Loop e a Fila de Microtarefas

O motor JavaScript usa um event loop que gerencia a execução de scripts, permitindo operações não bloqueantes. A fila de microtarefas faz parte desse event loop. Ela é usada especificamente para promises (consulte JavaScript: Promises) e outras operações como queueMicrotask, garantindo que sejam processadas ao final da execução atual do event loop do JavaScript, antes da fase de renderização.

Há duas filas distintas a ter em mente:

• A fila de microtarefas contém callbacks de promises resolvidas/rejeitadas e de queueMicrotask(). Após cada tarefa, o motor esvazia essa fila completamente antes de fazer qualquer outra coisa.
• A fila de macrotarefas (às vezes chamada de fila de tarefas) contém callbacks de setTimeout, setInterval, E/S e eventos de UI. Apenas uma macrotarefa é executada por iteração do loop.

A regra principal: quando o código síncrono atual termina, o motor primeiro esvazia a fila de microtarefas inteira, e só então seleciona a próxima macrotarefa. É por isso que um callback de promise sempre é executado antes de um callback setTimeout(…, 0) agendado anteriormente. Para uma visão completa de como essas filas interagem, consulte Event Loop: Microtasks and Macrotasks.

Exemplo: Promise Básica

Neste exemplo, o console exibe 'Script end' primeiro, seguido de 'Promise resolved'. Isso mostra como o JavaScript adia as resoluções de promises para a fila de microtarefas.

Como Funciona a Fila de Microtarefas?

A fila de microtarefas executa tarefas que são agendadas como microtarefas. Isso inclui operações de:

• Promises
• Object.observe (descontinuado)
• MutationObserver
• API queueMicrotask()

Cada uma dessas microtarefas é processada completamente antes de passar para a próxima, ou antes que qualquer renderização ou outra macrotarefa seja executada.

Agendando Microtarefas

Você pode agendar microtarefas diretamente usando a função queueMicrotask. Essa função recebe um callback e o adiciona à fila de microtarefas. Como você pode ver, a fila é executada após todas as outras tarefas serem concluídas.

Microtarefa vs. Macrotarefa: Por que uma Promise Supera o setTimeout(0)

Um ponto comum de confusão é por que um callback de promise é executado antes de um callback setTimeout(…, 0), mesmo quando o timer é agendado primeiro. A resposta está na regra acima: quando o código síncrono termina, o motor esvazia a fila de microtarefas completa antes de tocar na fila de macrotarefas, onde vivem os callbacks de setTimeout. Mesmo um timer com delay zero precisa esperar.

A saída é sempre:

1: synchronous start
2: synchronous end
3: promise (microtask)
4: setTimeout (macrotask)

As linhas 1 e 2 são executadas primeiro porque o código síncrono nunca cede. Em seguida, a fila de microtarefas é esvaziada (o callback da promise), e somente depois disso a próxima macrotarefa — o callback do setTimeout — tem sua vez. Saiba mais sobre timers em Scheduling: setTimeout and setInterval.

Ordem Dentro da Fila de Microtarefas

As microtarefas em si são executadas na ordem em que foram enfileiradas (FIFO). Misturar callbacks .then() com queueMicrotask() deixa isso claro — ambos alimentam a mesma fila, portanto o resultado é simplesmente primeiro a entrar, primeiro a sair:

Isso registra start, end, promise 1, queueMicrotask, promise 2. Observe que uma microtarefa agendada por outra microtarefa é adicionada à mesma fila e executada no mesmo ciclo de esvaziamento — antes de qualquer renderização ou macrotarefa. É exatamente isso que torna possível que loops de microtarefas descontrolados bloqueiem o restante da página.

Aplicações Práticas de Microtarefas

As microtarefas são especialmente úteis em aplicações web complexas para tarefas que requerem atenção imediata após o script atual, mas antes que o sistema trate outros eventos ou renderize novamente a UI.

Cenário: Processamento de Dados em Tempo Real

Considere um cenário em que dados em tempo real de um servidor precisam ser processados sem interromper a experiência do usuário:

Este exemplo demonstra a busca assíncrona de dados, seu processamento e o agendamento de uma atualização de UI na fila de microtarefas.

Tratamento Eficiente de Erros em Promises

Tratar erros de forma eficaz em código assíncrono é fundamental. Usar a fila de microtarefas com o tratamento de erros de promises garante que os erros sejam resolvidos imediatamente após a lógica de resolução da promise, mas antes de outras tarefas não relacionadas.

Melhores Práticas para Usar a Fila de Microtarefas

1. Ordenação de Tarefas: Entender quando usar microtarefas para garantir o sequenciamento correto das operações.
2. Evitar Bloqueio: Garantir que a fila de microtarefas não receba continuamente novas tarefas, impedindo que macrotarefas como atualizações de UI sejam executadas.
3. Depuração: Rastrear e depurar a execução de microtarefas para evitar comportamentos inesperados em código assíncrono.

Conclusão

Dominar a fila de microtarefas em JavaScript é essencial para desenvolver aplicações avançadas e responsivas. Ao aproveitar efetivamente esse componente poderoso do modelo de execução do JavaScript, os desenvolvedores podem garantir interações mais fluidas e não bloqueantes, além de uma melhor experiência do usuário. Esta exploração fornece o conhecimento fundamental e as habilidades práticas para utilizar a fila de microtarefas de forma eficaz em qualquer projeto baseado em JavaScript.

Prática