offset vs getBoundingClientRect() (v12)

Revision 12 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 fullOffset(elm){
      var offsetLeft = 0;
      var offsetTop = 0;
      while (elm){
        offsetTop += elm.offsetLeft;
        offsetTop += elm.offsetTop;
        elm = elm.offsetParent;
      }
      return { left: offsetLeft, top: offsetTop };
    } 
    
    var mydiv = document.getElementById('mydiv');

Test runner

Ready to run.

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

Revisions

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