offset vs getBoundingClientRect() (v9)

Revision 9 of this benchmark created by the neel on

Description

Just saying, it's indeed faster in webkit environment when you just use few divs but it seems not to be the case with more wrapping elements... and you know how much it happens for some layouts.

Preparation HTML

<div style="position:relative;display:inline-block; padding:40px;margin-top:12px">
<div style="position:relative;display:inline-block; padding:40px;margin-top:12px">
<div style="position:relative;display:inline-block; padding:40px;margin-top:12px">
<div style="position:relative;display:inline-block; padding:40px;margin-top:12px">
<div style="position:relative;display:inline-block; padding:40px;margin-top:12px">
<div style="position:relative;display:inline-block; padding:40px;margin-top:12px">
<div style="position:relative;display:inline-block; padding:40px;margin-top:12px">
<div style="position:relative;display:inline-block; padding:40px;margin-top:12px">
<div style="position:relative;display:inline-block; padding:40px;margin-top:12px">
<div style="position:relative;display:inline-block; padding:40px;margin-top:12px">

<div id="mydiv">test<div>

</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Setup

function fullOffset(offsetName, elm){
          var offset = elm[offsetName];
          while (elm.offsetParent != null){
              elm = elm.offsetParent;
              offset = offset + elm[offsetName];
          }
          return offset;
          console.log(offset);
      } 
    
    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

Revisions

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