offset vs getBoundingClientRect() (v4)

Revision 4 of this benchmark created by Marcin on


Preparation HTML

<div style="position:relative;padding:20px;margin-top:12px">
  <div style="position:relative;padding:20px;margin-top:12px">
    <div id="mydiv">
      test
      <div>
      </div>
    </div>

Setup

var cache = {
        offsetTop: [],
        offsetLeft: []
    }
    
    function fullOffsetCached(offsetName, elem) {
        if (cache[offsetName][elem]) {
            return cache[offsetName][elem];
        }
        var offset = elem[offsetName];
        var parent = elem;
        while (parent = parent.offsetParent) {
            offset += fullOffsetCached(offsetName, parent);
        }
        cache[offsetName][elem] = offset;
        return offset;
    }
    
    function fullOffset(offsetName, elm) {
      var offset = elm[offsetName];
      while (elm = elm.offsetParent) {
        offset = offset + elm[offsetName];
      }
      return offset;
    }
    
    function bothOffset(elem) {
      var offsetLeft = elem.offsetLeft,
          offsetTop = elem.offsetTop;
      while (elem = elem.offsetParent) {
        offsetLeft += elem.offsetLeft;
        offsetTop += elem.offsetTop;
      }
      return {
        left: offsetLeft,
        top: offsetTop
      };
    }
    
    var boundingOffset = function(elem) {
        var rect = elem.getBoundingClientRect();
        return {
          top: rect.top + document.documentElement.scrollTop,
          left: rect.left + document.documentElement.scrollLeft
        };
        };
    
    var boundingOffsetDoc = function(elem) {
        var rect = elem.getBoundingClientRect();
        var doc = document.documentElement;
        return {
          top: rect.top + doc.scrollTop,
          left: rect.left + doc.scrollLeft
        };
        };
    
    var mydiv = document.getElementById('mydiv')

Test runner

Ready to run.

Testing in
TestOps/sec
offset top cached
fullOffsetCached('offsetTop', mydiv);
fullOffsetCached('offsetTop', mydiv);
fullOffsetCached('offsetTop', mydiv);
fullOffsetCached('offsetTop', mydiv);
fullOffsetCached('offsetTop', mydiv);
fullOffsetCached('offsetTop', mydiv);
ready
getBoundingClientRect
mydiv.getBoundingClientRect().top;
mydiv.getBoundingClientRect().top;
mydiv.getBoundingClientRect().top;
mydiv.getBoundingClientRect().top;
mydiv.getBoundingClientRect().top;
mydiv.getBoundingClientRect().top;
ready
bothOffset
bothOffset(mydiv).top;
bothOffset(mydiv).top;
bothOffset(mydiv).top;
bothOffset(mydiv).top;
bothOffset(mydiv).top;
bothOffset(mydiv).top;
ready
bounding + scroll
boundingOffset(mydiv).top;
boundingOffset(mydiv).top;
boundingOffset(mydiv).top;
boundingOffset(mydiv).top;
boundingOffset(mydiv).top;
boundingOffset(mydiv).top;
ready
bounding + scroll (cache doc)
boundingOffsetDoc(mydiv).top;
boundingOffsetDoc(mydiv).top;
boundingOffsetDoc(mydiv).top;
boundingOffsetDoc(mydiv).top;
boundingOffsetDoc(mydiv).top;
boundingOffsetDoc(mydiv).top;
ready
offset function
fullOffset('offsetTop', mydiv);
fullOffset('offsetTop', mydiv);
fullOffset('offsetTop', mydiv);
fullOffset('offsetTop', mydiv);
fullOffset('offsetTop', mydiv);
fullOffset('offsetTop', mydiv);
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.