offset vs getBoundingClientRect() (v11)

Revision 11 of this benchmark created by a_bicky 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 fullOffsetTop(elm){
          var offsetTop = 0;
          while (elm){
              offsetTop += elm.offsetTop;
              elm = elm.offsetParent;
          }
          return offsetTop;
      } 
    
    var mydiv = document.getElementById('mydiv')

Test runner

Ready to run.

Testing in
TestOps/sec
offset function
var top = fullOffsetTop(mydiv);
ready
getBoundingClientRect
var top = mydiv.getBoundingClientRect().top;
 
ready

Revisions

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