是什么可能导致整个文档上的突变观察者，而子树则在孩子添加时不发射？

Question

有时，突变观察者回调不会在我期望的时候发射。

如果我在开发人员工具控制台中运行此代码：

// callback for mutations observer
 callbackForAllChanges = function (mutationsList, observer) {
  console.log("mutations: ", mutationsList);
};

// create mutation observer
 allChanges = new MutationObserver(callbackForAllChanges);


// attach mutation observer to document
  allChanges.observe(document, {
    childList: true,
      subtree:true
  });

// create new child
document.body.appendChild(document.createElement("div"));

我希望当我创建新孩子时，回调会发射。但是有时确实如此，有时却没有。

当我在stackoverflow上运行DevTools控制台中的代码时，它可以正常工作：我看到突变：[mutationRecord]已记录到控制台。

当我继续 Twitter 并在DevTools控制台中运行上述代码，它似乎不起作用：<代码突变：[突变记录]未记录到控制台。

是什么可能导致突变观察者在Twitter上不起作用？

要重新创建问题，

1. 请访问 twitter
2. 打开DevTools console
3. 粘贴以上代码，并参见突变：[mutationRecord] /code>不记录

更新2

Now it works for me on twitter so seems intermittent.

更新2

It's stopped working again on twitter. I also found if I add a mutation observer to a div I create, that also doesn't work but works on other sites.

const newDiv = document.createElement('div')
newDiv.setAttribute('id','newDiv')
// callback for mutations observer
 callbackForAllChanges = function (mutationsList, observer) {
  console.log("mutations: ", mutationsList);
};

// create mutation observer
 allChanges = new MutationObserver(callbackForAllChanges);


// attach mutation observer to document
  allChanges.observe(newDiv, {
    childList: true,
      subtree:true
  });

// create new child
newDiv.appendChild(document.createElement("div"));

更新3

• 突变观察者尚未停止在隐身方面工作，而
• 在不工作时，请关闭所有扩展名 nove 均未解决突变观察者，
• 并且重新启动Chrome似乎 修复突变观察者停止工作时，
• 清除cookie 修复了问题

更新4个

It may be related to an infinite loop where when a mutation is observed, a node is added. This causes a mutation to be observed (the new added node). And so on...

示例，

  const callbackForAllChanges = function (mutationsList, observer) {
    if (mutationsList.find((record) => record.type === "childList")) {      
  document.body.appendChild(document.createElement("div"));
    }
  };

我认为如果发生这种情况，它可能会触发突变工作以停止工作。

Answer 1

我面临同样的问题，现在我通过使用循环并检查是否手动进行了一些更改来修补回调。

setInterval(() => {
  const recs = allChanges.takeRecords()
  if (recs.length === ) return
  yourcallback(recs)
}, 30)

Answer 2

我能够在以下特定情况下重现此操作：

1. 开发工具是打开
2. 在MutationObserver回调
3. 加载页面中首次
4. 代码， 具有断点或调试器语句Breakpoint
5. MutationObserver回调再也不会为任何未来的页面重新加载
6. 重新加载到网站并启动新标签（即创建新页面过程）将状态重置回到第一步的

其他轶事：

• 我尝试使用一些尝试此词 ：较旧的铬（大约V97）的建筑物，有趣的是，如果试图从突变观察者回调断点中重新加载页面，其中许多人会崩溃。
• 存储对突变处理器的引用并使用takeRecord（）按预期工作。如上，它充满了突变记录。
• 使用QueuemicRotask（＆lt; cb＆gt;）将您的工作与突变观察者回调中的工作解矛并不能解决问题。
• 使用settimout（＆lt; cb＆gt; 0）确实解决了问题。

因此，如果您遇到与我相同的问题，解决方法是将您的突变观察者回调在settimeout（）中，如下所示...

new MutationObserver(() => setTimeout(myHandler, 0));

我不愿意将其称为答案说实话。我相信这里有一个铬的heis虫。如果您从未打开开发工具，那么这种解决方法是多余的。

Answer 3

此答案在

我想避免重构很多代码，因此我想出了这个hacky的解决方案，以将本机MutationObserver类包装在您自己的匿名类中（需要在之前运行任何被实例化的观察者）：

function fixObserver(name) {
  let original=window[name];
  window[name]=class {
    constructor (cb) {
      return new original((...params) => { 
        setTimeout(() => cb(...params));
      });
    }
  };
}
fixObserver('MutationObserver');
fixObserver('ResizeObserver');
fixObserver('IntersectionObserver');