offset vs getBoundingClientRect() (v13)

Revision 13 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 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 };
    } 
    window.GetBCR = Element.prototype.getBoundingClientRect
    Element.prototype.getRect = Element.prototype.getBoundingClientRect;
    
    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
Call Cached gBCR
var offset = GetBCR.call( mydiv );
ready
Renamed Prototype
var offset = mydiv.getRect();
ready

Revisions

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