javascript - MutationObserver 回调何时被触发？

Question

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

回调是:

• DOM 突变发生后立即调用，
• 操作 DOM 的函数完成后立即调用，
• 调用堆栈为空时立即调用，
• DOM 突变发生后立即入队，
• 操作 DOM 的函数完成后立即入队，或者
• 在其他时间？

例如，如果执行以下代码(使用 setZeroTimeout defined here ):

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 回调不使用事件队列。

我在 Google 上搜索了 HTML 规范、DOM 规范或浏览器实现文档，但没有找到与此行为相关的任何内容。

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

Answer 1

MutationObservers 是异步触发的，但“很快”，这意味着它们在队列中的其他事件(例如布局、绘制或触发事件)之前触发。

这改善了同步性的损失，因为您不必担心屏幕闪烁或在观察者有机会使用react之前发生其他不好的事情。

在开发者笔记中，他们讨论了“微任务结束”计时模型。我同意这没有很好的记录。