Run results for: style.getPropertyValue vs. getBoundingClientRect

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:131.0) Gecko/20100101 Firefox/131.0

Browser: Firefox 131

Operating system: Linux

Device Platform: Desktop

Date tested: one year ago

style.getPropertyValue

4K/s

getBoundingClientRect

683/s

View exact numbers

Test name	Executions per second
✓ style.getPropertyValue	3,737 Ops/sec
getBoundingClientRect	683 Ops/sec

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; }