Являются ли колбэки MutationObserver микротасками или макротасками? Почему?

Question

Колбэки MutationObserver являются микротасками (microtasks). Они выполняются в той же фазе event loop, что и Promise, но после них. Это обеспечивает высокий приоритет выполнения и гарантирует, что наблюдения за изменениями DOM обрабатываются до следующего рендеринга браузера.

YeaHub · Accepted Answer

MutationObserver использует микротаски для обеспечения своевременного и эффективного отслеживания изменений DOM.Место в event loop:Порядок выполнения задач:Макротаски (Macrotasks): setTimeout, setInterval, I/OМикротаски (Microtasks): Promise, queueMicrotask, MutationObserverРендеринг: Browser repaint/reflowСледующая итерация: Переход к следующей макротаскеДетали реализации:Поведение MutationObserver:// Создание observer
const observer = new MutationObserver((mutations) => {
  console.log('DOM изменился'); // Это микротаска
});

// Наблюдение за изменениями
observer.observe(document.body, {
  childList: true,
  subtree: true
});

// Пример порядка выполнения
console.log('Start');

setTimeout(() => {
  console.log('setTimeout'); // Макротаска
}, 0);

Promise.resolve().then(() => {
  console.log('Promise'); // Микротаска
});

// Изменение DOM
document.body.appendChild(document.createElement('div'));

console.log('End');

// Порядок вывода:
// "Start"
// "End" 
// "Promise" - микротаска Promise
// "DOM изменился" - микротаска MutationObserver
// "setTimeout" - макротаскаПреимущества микротаск:Своевременность выполнения:Обработка изменений DOM до следующего рендерингаГарантированный порядок относительно других микротаскВысокий приоритет в event loopЭффективность:Группировка множественных изменений в один колбэкИзбежание "дребезга" при частых измененияхОптимизация производительностиСравнение с другими подходами:MutationObserver vs setTimeout:// MutationObserver (микротаска)
observer.observe(element, { attributes: true });
element.setAttribute('data-test', 'value');
// Колбэк выполнится до следующего рендеринга

// setTimeout (макротаска)
element.setAttribute('data-test', 'value');
setTimeout(() => {
  // Колбэк выполнится после рендеринга
}, 0);Практическое значение:MutationObserver идеален для реактивных системГарантирует актуальность данных до визуального обновленияИспользуется в современных фреймворках для отслеживания изменений