当MutationObserver回调解雇？ [英] When are MutationObserver callbacks fired?

问题描述

我知道DOM变更后的某个时候MutationObservers回调可能被调用。但问题是：什么是这些回调的时机？
不要回调进入浏览器的事件队列？如果是这样，他们什么时候进入队列？

是回调：

• 马上叫DOM突变之后进行，


• 只要函数操作DOM完成，
称为

• 尽快称为调用堆栈是空的，


• 立即入队后，DOM突变发生，


• 一旦排队的函数，操作DOM完成，或


• 在其他时间？

例如，如果执行以下code的片（带 setZeroTimeout这里定义）：

  VAR的目标= document.body的;新MutationObserver（功能（突变）{
  的console.log（'MutationObserver'）;
}）。观察（目标，{
  属性：真实，
  的childList：真实，
  characterData：真
}）;
//留言信息
setZeroTimeout（函数（）{的console.log（'消息事件'）;}）;
// DOM突变
target.setAttribute（数据测试，价值）;
 

应该MutationObserver来之前的消息事件或之后打印？
或者是实现定义？

我收到MutationObserver消息事件之前铬26，虽然DOM突变是消息发布后。也许这是表明MutationObserver回调的不可以使用事件队列。

我用Google搜索了HTML规范，DOM规范或浏览器执行文件，但我并没有发现与此相关的任何行为。

在MutationObservers回调的时机任何解释或文件好吗？

解决方案

我要根据的更新DOM规范从WHATWG 。

如图规范

  

要排队的突变观察者复合microtask，执行下列步骤操作：

  
  

  
1. 如果突变观察者复合microtask排队标志设置，终止这些步骤。

  
2. 设置突变观察者复合microtask排队标志。

  
3. 队列复合microtask通知突变观察员。

  

在排队复合microtask链接在一节HTML规范解释microtask排队模型。

因此​​，我们可以得出结论， MutationObserver 回调被解雇作为microtasks，这确实是早于任务队列的任务​​通过的the回答上述。

有关事件循环和处理模型的进一步了解，事件循环HTML规范的部分将是完美的。

就个人而言，我很高兴地看到， MutationObserver 是标准的一部分，并有完善的记录和一致的时序模型。随着 MutationObserver 取值支持大部分现代浏览器的，我认为他们是坚实的，现在生产使用。

I know that MutationObservers callbacks may get called sometime after the DOM change. But the question is: What is the timing of these callbacks? Do the callbacks enter the event queue of the browsers? If so, when do they enter the queue?

Are the callbacks:

• called immediately after the DOM mutation take place,
• called as soon as the function that manipulate DOM finishes,
• called as soon as the call stack is empty,
• enqueued immediately after the DOM mutation take place,
• enqueued as soon as the function that manipulate DOM finishes, or
• at some other time?

For example, if the following piece of code is executed (with 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");

Should "MutationObserver" be printed before "message event" or after it? Or is it implementation-defined?

I'm getting "MutationObserver" before "message event" on Chromium 26, though the DOM mutation is after message posting. Maybe this is indicating that MutationObserver callbacks are not using the event queue.

I have googled for HTML specification, DOM specification or browser implementation documents, but I didn't found anything related to this behavior.

Any explanation or documentation on the timing of MutationObservers callbacks please?

解决方案

I'm going to answer my own question two years later according to the updated DOM spec from WHATWG.

As shown in the spec:

To queue a mutation observer compound microtask, run these steps:

1. If mutation observer compound microtask queued flag is set, terminate these steps.
2. Set mutation observer compound microtask queued flag.
3. Queue a compound microtask to notify mutation observers.

While "Queuing a compound microtask" links to a section in the HTML spec explaining the microtask queue model.

Therefore, we can conclude that MutationObserver callbacks are fired as microtasks, which are indeed sooner than the task queue tasks as suggested by the answer of @Scott Miles above.

For further understanding of the event loop and processing model, the Event Loop section of the HTML spec would be perfect.

Personally, I'm glad to see that MutationObservers are part of the standard and have a well-documented and consistent timing model. With MutationObservers supported in most modern browsers, I think they are solid for production use now.

这篇关于当MutationObserver回调解雇？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！