Odsłuchanie zdarzenia odtwarzania przeglądarki

Question

Próbuję słuchać przeglądarek reflow-events, aby dowiedzieć się, które części kodu są najdroższe. Przepływ pojawia się, gdy coś musi zostać (ponownie) narysowane na ekranie, na przykład kiedy nowy element zostanie dodany do DOM.

Czy istnieje sposób, aby słuchać zdarzeń thease na przykład w/z Javascriptem, do dalszej analizy?

Answer 1

Myślę, że rozwiązaniem jest użycie klasy DOM MutationObserver. Zgodnie z dokumentami:

Został zaprojektowany jako zamiennik zdarzeń mutacji zdefiniowanych w specyfikacji zdarzeń DOM3. Api Docs

Przykładem na miejscu jest dość wymowne

// select the target node 
var target = document.querySelector('#some-id'); 

// create an observer instance 
var observer = new MutationObserver(function(mutations) { 
    mutations.forEach(function(mutation) { 
    console.log(mutation.type); 
    });  
}); 

// configuration of the observer: 
var config = { attributes: true, childList: true, characterData: true }; 

// pass in the target node, as well as the observer options 
observer.observe(target, config); 

// later, you can stop observing 
observer.disconnect();