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

Question

MutationObserver позволяет отслеживать изменения в DOM без постоянных проверок. Он реагирует на добавление, удаление или изменение узлов. queueMicrotask позволяет вручную добавить задачу в очередь microtask. Оба механизма тесно связаны с event loop и выполняются до macrotask.

YeaHub · Accepted Answer

Работа с DOM и асинхронностью часто требует точного контроля момента выполнения кода.MutationObserverMutationObserver — это API для наблюдения за изменениями в DOM-дереве.Что он умеет отслеживатьДобавление и удаление узловИзменение атрибутовИзменение текстового содержимогоПримерconst observer = new MutationObserver((mutations) => {
  console.log(mutations);
});

observer.observe(document.body, {
  childList: true,
  subtree: true,
});
Колбэк будет вызван асинхронно после изменений DOM.queueMicrotaskqueueMicrotask — это функция для добавления задачи в очередь microtask.ОсобенностиВыполняется после текущего синхронного кодаВыполняется до setTimeoutАналогична Promise.then, но без создания PromiseПримерqueueMicrotask(() => {
  console.log("microtask");
});
Связь с event loopDOM-изменения фиксируютсяMutationObserver добавляет задачу в microtask queueEvent loop выполняет microtask до macrotaskВыводMutationObserver подходит для реакций на изменения DOM, а queueMicrotask — для точного управления порядком выполнения асинхронного кода.