Что такое Mutation Observer и для чего он нужен?

Что проверяют

Понимаете ли вы, когда приходится наблюдать за DOM извне, и знаете ли цену такого наблюдения. Обычно это работа с чужой разметкой: сторонний виджет, унаследованный код, вставка внешнего скрипта. Заодно проверяют знание асинхронной природы колбэка, на которой ломается большинство первых реализаций.

Как отвечать

MutationObserver сообщает об изменениях дерева: добавлении и удалении узлов, правке атрибутов, изменении текста. Он заменил синхронные события мутаций, которые срабатывали на каждое изменение и убивали производительность.

const observer = new MutationObserver((records) => {
  for (const r of records) console.log(r.type, r.target);
});
observer.observe(node, { childList: true, subtree: true, attributeFilter: ["class"] });

Что стоит проговорить:

• Колбэк вызывается асинхронно и пачкой записей, после того как отработает текущая задача. Синхронно узнать об изменении нельзя.
• В настройках нужен хотя бы один режим наблюдения, иначе вызов упадёт. Вложенные узлы видны только с флагом поддерева.
• Старое значение атрибута или текста придёт, только если запросить его отдельным флагом.
• Накопленные записи можно забрать вручную, а наблюдение снимают, когда компонент уходит с экрана.

Где спотыкаются

Запускают наблюдение и тут же отключают его в том же кадре, а потом удивляются пустому журналу. Записи ещё не доставлены, а отключение очищает очередь; если нужно забрать их немедленно, для этого есть отдельный метод получения накопленного.

Меняют внутри колбэка тот самый узел, за которым наблюдают. Правка порождает новые записи, те снова вызывают колбэк, и страница встаёт. Лечится проверкой, что изменение действительно нужно, либо снятием наблюдения на время правки.

Берут наблюдатель не для той задачи: следят за размерами блока или за попаданием в видимую область. Мутаций там может не быть вовсе, и для этого существуют отдельные наблюдатели за размером и за пересечением.