offset vs getBoundingClientRect() (v3)

Revision 3 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

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 mydiv = document.getElementById('mydiv')

Test runner

Ready to run.

Testing in
TestOps/sec
offset function
fullOffset('offsetTop', mydiv)
ready
getBoundingClientRect
mydiv.getBoundingClientRect().top
ready
bothOffset
bothOffset(mydiv)
ready

Revisions

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