Benchmark: Offsets only vs computedStyle

HTML Preparation code:

<div id="box">wut</div>

Script Preparation code:

let box = document.getElementById('box');

Tests:

Offsets only
console.log('In DOM and visible: ' + (!!(box.offsetHeight || box.offsetWidth || box.offsetTop || box.offsetLeft || box.offsetParent) ? 'true' : 'false'));
ComputedStyle only
let style = getComputedStyle(box); console.log('Visible: ' + (style['display'] !== 'none' && style['visibility'] !== 'hidden' && style['opacity'] > 0.1 ? 'true' : 'false'));
Both
console.log('In DOM and visible: ' + (!!(box.offsetHeight || box.offsetWidth || box.offsetTop || box.offsetLeft || box.offsetParent) ? 'true' : 'false')); let style = getComputedStyle(box); console.log('Visible: ' + (style['display'] !== 'none' && style['visibility'] !== 'hidden' && style['opacity'] > 0.1 ? 'true' : 'false'));

Rendered benchmark preparation results:

Previous results

ⓘ Get performance results from real users on your website with Request Metrics.

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.150 Safari/537.36 Edg/88.0.705.68

Browser/OS: Chrome 88 on Windows

Offsets only vs computedStyle (version: 0)