getComputedStyle vs getBoundingClientRect

Benchmark created by download 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.

Setup

var outerdiv = document.createElement('div');
    outerdiv.style.position = 'relative';
    outerdiv.style.width = '311px';
    outerdiv.style.height = '240px';
    
    var innerdiv = document.createElement('div');
    
    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

Revisions

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