offset vs getBoundingClientRect() (v15)

Revision 15 of this benchmark created on

Preparation HTML

<div style="position:relative;padding:20px;margin-top:12px">
<div style="position:relative;padding:20px;margin-top:12px">
<div style="position:relative;padding:20px;margin-top:12px">
<div style="position:relative;padding:20px;margin-top:12px">
<div style="position:relative;padding:20px;margin-top:12px">
<div style="position:relative;padding:20px;margin-top:12px">
<div style="position:relative;padding:20px;margin-top:12px">
<div style="position:relative;padding:20px;margin-top:12px">
<div style="position:relative;padding:20px;margin-top:12px">
<div style="position:relative;padding:20px;margin-top:12px">
<div style="position:relative;padding:20px;margin-top:12px">
<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>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Setup

function fullOffset(elm) {
    
      var offsetTop = elm.offsetTop,
        offsetLeft = elm.offsetLeft,
        elm = elm.offsetParent;
    
      while (elm !== null) {
        offsetTop += elm.offsetTop;
        offsetLeft += elm.offsetLeft;
        elm = elm.offsetParent;
      }
    
      return {
        left: offsetLeft,
        top: offsetTop
      };
    }
    
    var mydiv = document.getElementById('mydiv')

Test runner

Ready to run.

Testing in
TestOps/sec
offset function
fullOffset(mydiv)
ready
getBoundingClientRect
mydiv.getBoundingClientRect().top;
ready

Revisions

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