Benchmark: getComputedStyle vs style.getPropertyValue vs. getBoundingClientRect

HTML Preparation code:

<div id="foo">some content <div>text</div> yet one more</div>

Tests:

style.getPropertyValue
var i = 5000; var elm = document.getElementById('foo'); while (i--) { checkDisplay(elm); } function checkDisplay(elm) { return parseInt(elm.style.getPropertyValue('width'), 10) === 0; }
getBoundingClientRect
var i = 5000; var elm = document.getElementById('foo'); while (i--) { checkDisplay(elm); } function checkDisplay(elm) { return Math.floor(elm.getBoundingClientRect().width) === 0; }
getComputedStyle
var i = 5000; var elm = document.getElementById('foo'); while (i--) { checkDisplay(elm); } function checkDisplay(elm) { return parseInt(window.getComputedStyle(elm, null).getPropertyValue('width'), 10) === 0; }

Rendered benchmark preparation results:

Previous results

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.0.1 Safari/605.1.15

Browser/OS: Safari 18 on Mac OS X 10.15.7

style.getPropertyValue

2K/s

getBoundingClientRect

714/s

getComputedStyle

442/s

View exact numbers

getComputedStyle vs style.getPropertyValue vs. getBoundingClientRect (version: 0)