何时触发MutationObserver回调？

Question

我知道在DOM更改后的某个时候可能会调用MutationObservers回调.但问题是:这些回调的时机是什么时候？回调是否进入浏览器的事件队列？如果是这样,他们什么时候进入队列？

是回调:

• 在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"？或者它是实现定义的？

我在Chromium 26上的"消息事件"之前得到了"MutationObserver",尽管DOM突变是在消息发布之后.也许这表明MutationObserver回调没有使用事件队列.

我搜索过HTML规范,DOM规范或浏览器实现文档,但我没有发现任何与此行为相关的内容.

有关MutationObservers回调时间的任何解释或文档吗？

Answer 1

MutationObservers是异步触发但"很快",这意味着它们会在队列中的其他内容之前触发,例如布局,绘制或触发事件.

这可以改善失去同步性,因为在观察者有机会做出反应之前,您不必担心屏幕闪烁或其他不良事件.

在开发人员的笔记中,他们谈到了"微任务结束"时序模型.我同意这个记录很少.

Answer 2

两年后,根据WHATWG更新的DOM规范,我将回答我自己的问题.

如规格所示:

要对突变观察者复合微任务进行排队,请运行以下步骤:

1. 如果设置了变异观察器复合微任务排队标志,则终止这些步骤.
2. 设置变异观察者复合微任务排队标志.
3. 对复合微任务进行排队以通知变异观察者.

而"排队复合微任务"链接到HTML规范中解释微任务队列模型的部分.

因此,我们可以得出结论,MutationObserver回调是作为微任务触发的,它确实比任务队列任务更快,正如上面@Scott Miles的回答所建议的那样.

为了进一步了解事件循环和处理模型,HTML规范的Event Loop部分将是完美的.

就个人而言,我很高兴看到MutationObservers是标准的一部分,并且有一个记录良好且一致的时序模型.随着MutationObserver小号在最现代的浏览器都支持,我认为他们现在是固体供生产使用.