Как будет выполняться MutationObserver?

Механизм выполнения MutationObserver

MutationObserver — это нативный JavaScript API для асинхронного отслеживания изменений в DOM-дереве. Его выполнение происходит в несколько этапов, тесно интегрированных с циклом событий браузера.

Этап 1: Создание и настройка наблюдателя

Сначала создается экземпляр наблюдателя с callback-функцией, которая будет выполняться при обнаружении изменений:

const observer = new MutationObserver((mutationsList, observerInstance) => {
    // Обработчик изменений DOM
    for (const mutation of mutationsList) {
        console.log('Тип изменения:', mutation.type);
        console.log('Измененный узел:', mutation.target);
    }
});

Этап 2: Начало наблюдения

На этом этапе указывается целевой узел и конфигурация наблюдаемых изменений:

const config = {
    childList: true,          // Отслеживать добавление/удаление дочерних элементов
    attributes: true,         // Отслеживать изменения атрибутов
    attributeOldValue: true,  // Сохранять старое значение атрибута
    characterData: true,      // Отслеживать изменения текстовых узлов
    subtree: true,            // Отслеживать все поддерево
    attributeFilter: ['class', 'style'] // Фильтр по конкретным атрибутам
};

observer.observe(document.getElementById('target'), config);

Этап 3: Механизм обнаружения изменений

MutationObserver работает по принципу "сбора мутаций" (mutation batching):

1. Детектирование изменений: Когда происходят изменения в DOM (добавление узлов, изменение атрибутов и т.д.), браузер не вызывает callback немедленно. Вместо этого он помещает информацию о мутации в внутреннюю очередь.

2. Микротаск и асинхронность: Callback выполняется как микротаск (microtask) — после завершения текущего синхронного кода, но до следующей отрисовки (render). Это ключевое отличие от устаревшего MutationEvents, который работал синхронно.

3. Группировка мутаций: Все изменения, произошедшие в рамках одной задачи (task), группируются и передаются в callback одним пакетом:

// Все три изменения будут обработаны ОДНИМ вызовом callback
element.classList.add('active');
element.setAttribute('data-test', 'value');
element.appendChild(newElement);

Этап 4: Выполнение callback-функции

Когда наступает время выполнения микротасков:

1. Извлечение мутаций: Браузер извлекает все накопленные мутации из очереди.

2. Вызов callback: Вызывается переданная функция с двумя аргументами:

   • mutationsList — массив объектов MutationRecord
   • observerInstance — ссылка на сам наблюдатель

3. Обработка записей: Каждый MutationRecord содержит:

   {
       type: 'attributes' | 'childList' | 'characterData',
       target: node, // Измененный узел
       addedNodes: NodeList, // Добавленные узлы
       removedNodes: NodeList, // Удаленные узлы
       attributeName: string, // Имя измененного атрибута
       oldValue: string // Старое значение (если настроено)
   }
   

Этап 5: Особенности выполнения

• Неблокирующая природа: Поскольку callback выполняется как микротаск, он не блокирует основной поток до завершения.

• Порядок выполнения: Если несколько наблюдателей отслеживают один узел, их callbacks выполнятся в порядке создания.

• Отмена наблюдения: Наблюдение можно остановить:

  // Прекратить наблюдение
  observer.disconnect();
  
  // Очистить необработанные мутации
  const pendingMutations = observer.takeRecords();
  

Пример полного цикла выполнения

// Создание наблюдателя
const observer = new MutationObserver((mutations) => {
    console.log(`Обнаружено ${mutations.length} изменений`);
});

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

// Серия изменений DOM
document.body.appendChild(document.createElement('div')); // 1
document.body.appendChild(document.createElement('span')); // 2
document.body.removeChild(document.body.lastChild); // 3

// Только здесь (в микротаске) выполнится callback с ТРЕМЯ мутациями
// Вывод: "Обнаружено 3 изменений"

Ключевые преимущества такого подхода

• Производительность: Группировка мутаций снижает нагрузку
• Стабильность: Callback не прерывает текущее выполнение кода
• Предсказуемость: Все изменения обрабатываются в одном событийном цикле
• Контроль памяти: Явное управление подпиской через disconnect()

MutationObserver интегрирован в механизм event loop браузера, обеспечивая эффективное наблюдение за DOM без негативного влияния на производительность, что делает его идеальным инструментом для реализации реактивных интерфейсов, ленивой загрузки, отслеживания динамического контента и отладки изменений DOM.