script for detecting DOM method calls that are know to cause a reflow

detect-reflow.js

// These methods and getter/setters force layout/reflow in Chrome/WebKit
// From https://gist.github.com/paulirish/5d52fb081b3570c81e3a

const getterSetters = [
  'offsetLeft',
  'offsetTop',
  'offsetWidth',
  'offsetHeight',
  'offsetParent',
  'clientLeft',
  'clientTop',
  'clientWidth',
  'clientHeight',
];

const methods = [
  'getClientRects',
  'getBoundingClientRect',
];

function logger(methodName, el) {
  console.log(`${methodName} called on: `, el.nodeName + '#' + el.classList.toString());
}

//create a separate JS context that's clean
const iframe = document.createElement('iframe');

//have to append it to get access to HTMLElement
document.body.appendChild(iframe);

getterSetters.forEach(method => {
  //grab the setter. note that __lookupSetter__ is deprecated maybe try getOwnPropertyDescriptor? anyways this works currently
  let origGetter = iframe.contentWindow.HTMLElement.prototype.__lookupGetter__(method);
  let origSetter = iframe.contentWindow.HTMLElement.prototype.__lookupSetter__(method);

  //mangle the global HTMLElement in this JS context
  Object.defineProperty(HTMLElement.prototype, method, {
      set: function (val) {
        logger('set ' + method, this);
        return origSetter.call(this, val); //allow the method to be called like normal
      },
      get: function() {
        logger('get ' + method, this);
        return origGetter.call(this); //allow the method to be called like normal
      }
  });  
});

methods.forEach(method => {
  const origFn = HTMLElement.prototype[method];
  HTMLElement.prototype[method] = function() {
    logger(method, this);
    return origFn.apply(this, arguments);
  };
});