getBoundingClientRect-width,height vs offsetWidth,offsetHeight

Benchmark created on

Preparation HTML

<div id="foo" style="width:500px; height:500px; padding:10px; border:10px solid #000000;">
</div>

Setup

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

Test runner

Ready to run.

Testing in
TestOps/sec
boundingclientrect
var bcr = foo.getBoundingClientRect();
var width = bcr.width;
var height = bcr.height;
ready
offsetWidth+offsetHeight
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.