Что такое MutationObserver и queueMicrotask?

Работа с DOM и асинхронностью часто требует точного контроля момента выполнения кода.

MutationObserver

MutationObserver — это API для наблюдения за изменениями в DOM-дереве.

Что он умеет отслеживать

1. Добавление и удаление узлов

2. Изменение атрибутов

3. Изменение текстового содержимого

Пример

const observer = new MutationObserver((mutations) => {
  console.log(mutations);
});

observer.observe(document.body, {
  childList: true,
  subtree: true,
});

Колбэк будет вызван асинхронно после изменений DOM.

queueMicrotask

queueMicrotask — это функция для добавления задачи в очередь microtask.

Особенности

1. Выполняется после текущего синхронного кода

2. Выполняется до setTimeout

3. Аналогична Promise.then, но без создания Promise

Пример

queueMicrotask(() => {
  console.log("microtask");
});

Связь с event loop

1. DOM-изменения фиксируются

2. MutationObserver добавляет задачу в microtask queue

3. Event loop выполняет microtask до macrotask

Вывод

MutationObserver подходит для реакций на изменения DOM, а queueMicrotask — для точного управления порядком выполнения асинхронного кода.