getBoundingRect vs scrollTop (v19)

Revision 19 of this benchmark created by test on

Preparation HTML

<style>
  #wrap1 {
    width:300px;
    margin:10px;
    padding:10px;
    border:10px solid black;
  }

  #wrap2 {
    margin:10px;
    padding:10px;
    border:10px solid red;
  }

  #myDiv {
    margin:10px;
    padding:10px;
    border:10px solid blue;
  }
</style>

<div id="wrap1">
  <div id="wrap2">
    <div id="myDiv">
      Test
    </div>
  </div>
</div>

Setup

var foo = document.getElementById('myDiv');

Test runner

Ready to run.

Testing in
TestOps/sec
getBoundingClientRect calc
var rect = foo.getBoundingClientRect();
var width = rect.right - rect.left;
var height = rect.bottom - rect.top;
ready
getBoundingClientRect get
var rect = foo.getBoundingClientRect();
var width = rect.width;
var height = rect.height;
ready
offset
var width = foo.offsetWidth;
var height = foo.offsetHeight;
ready

Revisions

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