当MutationObserver回调解雇?(When are MutationObserver c

2019-07-18 21:04发布

我知道,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”之前“消息事件”或之后进行打印? 或者是实现定义?

我得到“MutationObserver”“消息事件”之前,铬26,虽然DOM突变是消息发布后。 也许这是表明MutationObserver回调使用事件队列。

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

在MutationObservers的时序任何解释或文件回调吗?

Answer 1:

MutationObservers是异步,但“很快”发射,这意味着他们之前在队列中其他的东西,比如布局,油漆,或触发的事件触发。

这改善同步的损失,因为你不必担心屏幕闪烁或其他不好的事情发生的观察者都将有机会作出反应之前。

在开发人员的笔记,他们谈论的“结束microtask”时序模型。 我同意这是不良记录。



Answer 2:

我会根据两年后回答我的问题, 从WHATWG更新DOM规范 。

作为规范所示:

排队的突变观察员复合microtask,执行这些步骤:

  1. 如果突变观察者复合microtask排队标志设置,终止这些步骤。
  2. 设置突变观察者复合microtask排队标志。
  3. 排队的化合物microtask通知突变观察者。

而“队列的化合物microtask”链接到在HTML规范的截面说明microtask排队模型。

因此,我们可以得出这样的结论MutationObserver回调烧制microtasks,这确实是早于任务队列任务所建议上述@Scott万里的答案 。

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

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



文章来源: When are MutationObserver callbacks fired?