Когда срабатывают обратные вызовы 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 не используют очередь событий.

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

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

Источник

2 ответа

Решение

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

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

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

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

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

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

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

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

Источник

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

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

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

Источник
Другие вопросы по тегам