Run results for: 3 x getComputedStyle vs 2 x getComputedStyle + 1 x getBoundingClientRect

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/115.0

Browser: Firefox 115

Operating system: Mac OS X 10.15

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
3 x getComputedStyle	244.9 Ops/sec
2 x getComputedStyle + 1 x getBoundingClientRect	215.0 Ops/sec

HTML Preparation code:

<div id="foo"></div>

Tests:

3 x getComputedStyle
var i = 5000; while (i--) { checkDisplay('foo'); } function checkDisplay(id) { const style = window.getComputedStyle(document.getElementById(id)); return style.height + style.marginTop + style.marginBottom }
2 x getComputedStyle + 1 x getBoundingClientRect
var i = 5000; while (i--) { checkDisplay('foo'); } function checkDisplay(id) { const el = document.getElementById(id); const style = window.getComputedStyle(el); const rect = el.getBoundingClientRect(); return rect.height + style.marginTop + style.marginBottom }