getComputedStyle vs getBoundingClientRect (v4)

Revision 4 of this benchmark created on

Description

For getting things like the width/height if an element (assuming no borders, padding, or margins), is it faster to compute all the element's styles, or use the getBoundingClientRect function.

Preparation HTML

<div id="innerdiv" style="position:absolute;width:200px;height:200px;left:20px;top:50px;background-color:grey;">Some text</div>

Setup

var outerdiv = document.createElement('div');
    outerdiv.style.position = 'relative';
    outerdiv.style.width = '311px';
    outerdiv.style.height = '240px';
    
    var innerdiv = document.getElementById('innerdiv');
    
    outerdiv.appendChild(innerdiv);

Test runner

Ready to run.

Testing in
TestOps/sec
Defined getComputedStyle
var style = getComputedStyle(outerdiv);
var width = style.width;
var height = style.height;
ready
Auto getComputedStyle
var style = getComputedStyle(innerdiv);
var width = style.width;
var height = style.height;
ready
Defined getBoundingClientRect
var style = outerdiv.getBoundingClientRect();
var width = style.width;
var height = style.height;
ready
Auto getBoundingClientRect
var style = innerdiv.getBoundingClientRect();
var width = style.width;
var height = style.height;
ready
Style Property
var style = innerdiv.style;
var width = style.width;
var height = style.height;
ready
Style Property W,H,T,L
var style = innerdiv.style;
var width = style.width;
var height = style.height;
var left = style.left;
var top = style.top;
ready
client / offset
var width = innerdiv.clientWidth;
var height = innerdiv.clientHeight;
var left = innerdiv.offsetLeft;
var top = innerdiv.offsetTop;
ready

Revisions

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