Когда срабатывают обратные вызовы MutationObserver?

Я знаю, что обратные вызовы MutationObservers могут быть вызваны через некоторое время после изменения DOM. Но возникает вопрос: каковы сроки этих обратных вызовов? Выполняют ли обратные вызовы очередь событий в браузерах? Если да, то когда они входят в очередь?

Являются ли обратные вызовы:

  • вызываемый сразу же после мутации DOM,
  • как только функция, которая обрабатывает DOM, заканчивается,
  • как только стек вызовов пуст,
  • выставляется сразу после мутации DOM,
  • завершается, как только функция, управляющая DOM, заканчивается, или
  • в другое время?

Например, если выполняется следующий фрагмент кода (setZeroTimeout, указанный здесь):

var target = document.body;

new MutationObserver(function(mutations) {
  console.log('MutationObserver');
}).observe(target, {
  attributes: true,
  childList: true,
  characterData: true
});


// Post message
setZeroTimeout(function () { console.log('message event'); });
// DOM mutation
target.setAttribute("data-test", "value");

Должен ли "MutationObserver" печатать перед "сообщением" или после него? Или это определяется реализацией?

Я получаю "MutationObserver" перед "событием сообщения" на Chromium 26, хотя мутация DOM после публикации сообщения. Возможно, это указывает на то, что обратные вызовы MutationObserver не, используя очередь событий.

У меня есть googled для спецификации HTML, спецификации DOM или документов реализации браузера, но я не нашел ничего, связанного с этим поведением.

Любое объяснение или документация о сроках обратных вызовов MutationObservers, пожалуйста?

Ответы

Ответ 1

Я собираюсь ответить на свой вопрос два года спустя в соответствии с обновленной спецификацией DOM от WHATWG.

Как показано в спецификации:

Чтобы поставить в очередь составную микрозадачу для наблюдателя мутаций, выполните следующие действия:

  1. Если установлен флаг постановки в очередь микрообзоров наблюдателя мутаций, прекратите эти шаги.
  2. Установите флажок наблюдателя мутации составной очереди очереди.
  3. Поставьте в очередь составную микрозадачу, чтобы уведомить наблюдателей о мутациях.

При "постановке в очередь сложной микрозадачи" ссылка на раздел в спецификации HTML объясняет модель очереди для микрозадачи.

Таким образом, мы можем заключить, что обратные вызовы MutationObserver запускаются как микрозадачи, которые действительно выполняются быстрее, чем задачи очереди задач, как было предложено в ответе @Scott Miles выше.

Для дальнейшего понимания цикла обработки событий и модели обработки, раздел "Контур обработки событий" спецификации HTML был бы идеальным вариантом.

Лично я рад видеть, что MutationObserver являются частью стандарта и имеют хорошо документированную и согласованную модель синхронизации. С MutationObserver поддерживаемым в большинстве современных браузеров, я думаю, что они сейчас пригодны для промышленного использования.

Ответ 2

MutationObservers запускаются асинхронно, но "скоро", что означает, что они запускаются перед другими вещами в очереди, такими как макет, краска или инициированные события.

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

В заметках разработчика они рассказывают о временной модели "конечной микротаски". Я согласен, что это плохо документировано.