MutationObserver не получает все обновления

Question

У меня есть следующий код внутри расширения хрома:

var observer = new MutationObserver(function (mutations) { 
mutations.forEach(function (mutation) { 
    if (mutation.type === "childList") { 
     Log.Debug("mutation: Childlist:"+mutation.addedNodes.length); 
     forEach.call(mutation.addedNodes, function (addedNode) { 
      if (addedNode.classList !== undefined) { 
       if (addedNode.classList.contains('nja')) { 
        Log.Debug("DOM PD:"+addedNode.classList); 
        DoFancyStuff(addedNode); 
       } 
      } 
     } 
}}); 

Это происходит на сайте, который добавляет содержимое динамически. (Google +). Все работает идеально, если пользователь прокручивается вниз и добавляется несколько новых элементов.

Если пользователь некоторое время отходит от браузера и нажимает на кнопку, которая отображает множество новых элементов, MutationObserver, похоже, пропускает некоторые узлы. Я могу проверить это поведение внутри окна отладки. (Несколько добавленных разделов с классом «nja» записываются на консоль, некоторые из них не являются)

Так что для меня кажется, что это работает только в том случае, если одновременно добавлено не так много div. Есть ли какая-либо конфигурация для изменения этого поведения?

(Потому что это хром расширение нужно только решение для хрома не для любого другого браузера)

Answer 1

Если div с nja класса является дочерним элементом, который добавляется, эта мутация наблюдатель выиграл» видеть это.

Например, выполнив следующие действия на странице с мутацией наблюдателя:

var added = document.createElement('section'); 
added.innerHTML = '<div class="nja">nested</div>'; 
document.body.appendChild(added); 

Вы должны увидеть, что наблюдатель будет работать для section элемента, но не div.nja.

Возможно, вам просто нужно сделать querySelectorAll на каждый добавленный элемент.

Answer 2

Привет, ребята, я обнаружил, что MutationObserver довольно дрянной при обнаружении изменений текста в [contenteditable] элементах. Особенно в Mac OS Safari, который я использую.

Случайно я обнаружил, что, когда я использую пустоту SetInterval на моем сайте, MutationObserver работает более или менее, как ожидалось, даже в Safari.

Ниже приведена моя скрипка jsfiddle с рабочим примером. Посмотрите на вывод консоли, чтобы увидеть отзывчивость при изменении длительности SetInterval. Также попробуйте прокомментировать весь SetInterval, чтобы посмотреть, как будет выглядеть дрянной наблюдатель.

var target = document.querySelector('#something'); 
 
console.log(target); 
 
var observer = new WebKitMutationObserver(function(mutations) { 
 
    mutations.forEach(function(mutation) { 
 
    var time = new Date(); 
 
    console.log(time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds() + "." + time.getMilliseconds()); 
 
    console.log(target.innerHTML); 
 
    }); 
 
}); 
 
observer.observe(target, { 
 
    attributes: true, 
 
    childList: true, 
 
    characterData: true, 
 
    subtree: true 
 
}); 
 
//observer.disconnect(); - to stop observing 
 

 

 
setInterval(function() {}, 10);

<div id="something" contenteditable>Something</div>