MutationObserver — это микротаска или макротаска и почему?

Колбэки MutationObserver: микротаски или макротаски?

• MutationObserver — API для наблюдения за изменениями в DOM.
• Колбэки MutationObserver помещаются в очередь микротасков.
• Они запускаются после завершения всех синхронных операций текущего шага.
• Благодаря этому изменения DOM обрабатываются до начала рендеринга.
• В отличие от макротасков микротаски выполняются перед обновлением UI.
• Это обеспечивает более быструю и точную реакцию на изменения.
• Такой механизм позволяет согласованно и своевременно обрабатывать модификации DOM.

Подробный ответ

Основной ответ

Колбэки MutationObserver выполняются в очереди микротасков (microtask queue). Иными словами, браузер вызывает их после завершения текущего JavaScript-кода и обработки всех микротасков, добавленных ранее, но до перехода к макротаскам — например, обработчикам UI-событий, setTimeout и сетевым запросам.

Ключевые моменты

• Микротаски выполняются непосредственно после синхронного кода и до рендеринга. Поэтому MutationObserver позволяет быстро реагировать на изменения DOM, не создавая задержку, характерную для перехода в очередь макротасков.
• В соответствии со спецификацией DOM механизмы, способные изменять состояние документа, включая MutationObserver, помещают свои колбэки в очередь микротасков. Это необходимо, чтобы состояние DOM оставалось согласованным до следующей отрисовки.
• Макротаски, например setTimeout и обработчики событий, выполняются позже. Колбэки MutationObserver срабатывают раньше, что особенно важно для надёжного отслеживания изменений DOM, последующего обновления UI и запуска реактивных эффектов.

Практический контекст

В современных браузерах (Chrome 114+, Firefox 114+, Safari 16+) колбэки MutationObserver запускаются из очереди микротасков. Поэтому API удобно применять для реактивного отслеживания изменений DOM с минимальной задержкой. Во фронтенд-разработке это, например, помогает эффективно реагировать на динамические изменения интерфейса без лишних таймаутов и связанных с ними гонок.