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

`MutationObserver` асинхронно сообщает об изменениях в DOM: добавлении и удалении узлов, изменении атрибутов и текста.

Как устроен вызов

• Изменения не обрабатываются по одному сразу: браузер собирает записи (MutationRecord) и вызывает колбэк микрозадачей — после текущего синхронного кода, но до следующей макрозадачи и до рендера.
• Если за один синхронный блок DOM изменили 100 раз, колбэк вызовется один раз с массивом записей.

const observer = new MutationObserver((records) => {
  for (const record of records) console.log(record.type, record.target);
});
observer.observe(list, { childList: true, subtree: true, attributes: true });

list.append(document.createElement('li'));
console.log('sync');
// sync → затем колбэк observer

Нюансы

• Нужно явно указать, что отслеживать: childList, attributes, characterData, subtree.
• Изменения DOM внутри колбэка могут снова его вызвать — легко получить цикл.
• observer.disconnect() обязательно вызывать при уничтожении компонента.

Коротко для собеседования

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

Подробнее: MDN — MutationObserver