offset vs getBoundingClientRect()

Benchmark created 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.offsetParent != null){
              elm = elm.offsetParent;
              offset = offset + elm[offsetName];
          }
          return 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.