Listening browser reflow event

Question

I'm trying to listen browsers reflow-events to get an idea what parts of a code are the most expensive ones. Reflow occurs when something must be (re)drawn to screen, for example when new element is added to DOM.

Is there a way to listen thease events for example in/with Javascript, for further analysis?

Answer 1

I think the solution it's to use the DOM MutationObserver class. As the Docs point out:

It is designed as a replacement for Mutation Events defined in the DOM3 Events specification. Api Docs

The example on the site is pretty self explanatory

// 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();