Run results for: Offsets only vs computedStyle v2

Run details:

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

Browser: Safari 14

Operating system: Mac OS X 10.15.6

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
Offsets only	118342.9 Ops/sec
ComputedStyle only	93190.6 Ops/sec
Offset then computedStyle	50618.3 Ops/sec
ComputedStyle then offset	50664.1 Ops/sec

HTML Preparation code:

<style>
  div {
  	display: block;
  	position: absolute;
  	top: 10px;
  	left: 10px;
  	color: red;
  }
  #box {
  	color: blue;
  }
  #missing {
  	display: none;
  }
  #hiding {
  	visibility: hidden;
  }
  #misplaced {
  	top: -500px;
  }
  #melting {
  	opacity: 0;
  }
</style>

<div id="box">wut</div>
<div id="missing">whaaaat</div>
<div id="hiding">no</div>
<div id="misplaced">over heeeere</div>
<div id="melting">wicked witch</div>

Script Preparation code:

let box = document.getElementById('box');
let missing = document.getElementById('missing');
let hiding = document.getElementById('hiding');
let misplaced = document.getElementById('misplaced');
let melting = document.getElementById('melting');

Tests:

Offsets only
console.log('Box in DOM and visible: ' + (!!(box.offsetHeight || box.offsetWidth || box.offsetTop || box.offsetLeft || box.offsetParent) ? 'true' : 'false')); console.log('Missing in DOM and visible: ' + (!!(missing.offsetHeight || missing.offsetWidth || missing.offsetTop || missing.offsetLeft || missing.offsetParent) ? 'true' : 'false')); console.log('Hiding in DOM and visible: ' + (!!(hiding.offsetHeight || hiding.offsetWidth || hiding.offsetTop || hiding.offsetLeft || hiding.offsetParent) ? 'true' : 'false')); console.log('Misplaced in DOM and visible: ' + (!!(misplaced.offsetHeight || misplaced.offsetWidth || misplaced.offsetTop || misplaced.offsetLeft || misplaced.offsetParent) ? 'true' : 'false')); console.log('Melting in DOM and visible: ' + (!!(melting.offsetHeight || melting.offsetWidth || melting.offsetTop || melting.offsetLeft || melting.offsetParent) ? 'true' : 'false'));
ComputedStyle only
let boxStyle = getComputedStyle(box); console.log('Box visible: ' + (boxStyle['display'] !== 'none' && boxStyle['visibility'] !== 'hidden' && boxStyle['opacity'] > 0.1 ? 'true' : 'false')); let missingStyle = getComputedStyle(missing); console.log('Missing visible: ' + (missingStyle['display'] !== 'none' && missingStyle['visibility'] !== 'hidden' && missingStyle['opacity'] > 0.1 ? 'true' : 'false')); let hidingStyle = getComputedStyle(hiding); console.log('Hiding visible: ' + (hidingStyle['display'] !== 'none' && hidingStyle['visibility'] !== 'hidden' && hidingStyle['opacity'] > 0.1 ? 'true' : 'false')); let misplacedStyle = getComputedStyle(misplaced); console.log('Misplaced visible: ' + (misplacedStyle['display'] !== 'none' && misplacedStyle['visibility'] !== 'hidden' && misplacedStyle['opacity'] > 0.1 ? 'true' : 'false')); let meltingStyle = getComputedStyle(melting); console.log('Melting visible: ' + (meltingStyle['display'] !== 'none' && meltingStyle['visibility'] !== 'hidden' && meltingStyle['opacity'] > 0.1 ? 'true' : 'false'));
Offset then computedStyle
console.log('Box in DOM and visible: ' + (!!(box.offsetHeight || box.offsetWidth || box.offsetTop || box.offsetLeft || box.offsetParent) ? 'true' : 'false')); let boxStyle = getComputedStyle(box); console.log('Box visible: ' + (boxStyle['display'] !== 'none' && boxStyle['visibility'] !== 'hidden' && boxStyle['opacity'] > 0.1 ? 'true' : 'false')); console.log('Missing in DOM and visible: ' + (!!(missing.offsetHeight || missing.offsetWidth || missing.offsetTop || missing.offsetLeft || missing.offsetParent) ? 'true' : 'false')); let missingStyle = getComputedStyle(missing); console.log('Missing visible: ' + (missingStyle['display'] !== 'none' && missingStyle['visibility'] !== 'hidden' && missingStyle['opacity'] > 0.1 ? 'true' : 'false')); console.log('Hiding in DOM and visible: ' + (!!(hiding.offsetHeight || hiding.offsetWidth || hiding.offsetTop || hiding.offsetLeft || hiding.offsetParent) ? 'true' : 'false')); let hidingStyle = getComputedStyle(hiding); console.log('Hiding visible: ' + (hidingStyle['display'] !== 'none' && hidingStyle['visibility'] !== 'hidden' && hidingStyle['opacity'] > 0.1 ? 'true' : 'false')); console.log('Misplaced in DOM and visible: ' + (!!(misplaced.offsetHeight || misplaced.offsetWidth || misplaced.offsetTop || misplaced.offsetLeft || misplaced.offsetParent) ? 'true' : 'false')); let misplacedStyle = getComputedStyle(misplaced); console.log('Misplaced visible: ' + (misplacedStyle['display'] !== 'none' && misplacedStyle['visibility'] !== 'hidden' && misplacedStyle['opacity'] > 0.1 ? 'true' : 'false')); console.log('Melting in DOM and visible: ' + (!!(melting.offsetHeight || melting.offsetWidth || melting.offsetTop || melting.offsetLeft || melting.offsetParent) ? 'true' : 'false')); let meltingStyle = getComputedStyle(melting); console.log('Melting visible: ' + (meltingStyle['display'] !== 'none' && meltingStyle['visibility'] !== 'hidden' && meltingStyle['opacity'] > 0.1 ? 'true' : 'false'));
ComputedStyle then offset
let boxStyle = getComputedStyle(box); console.log('Box visible: ' + (boxStyle['display'] !== 'none' && boxStyle['visibility'] !== 'hidden' && boxStyle['opacity'] > 0.1 ? 'true' : 'false')); console.log('Box in DOM and visible: ' + (!!(box.offsetHeight || box.offsetWidth || box.offsetTop || box.offsetLeft || box.offsetParent) ? 'true' : 'false')); let missingStyle = getComputedStyle(missing); console.log('Missing visible: ' + (missingStyle['display'] !== 'none' && missingStyle['visibility'] !== 'hidden' && missingStyle['opacity'] > 0.1 ? 'true' : 'false')); console.log('Missing in DOM and visible: ' + (!!(missing.offsetHeight || missing.offsetWidth || missing.offsetTop || missing.offsetLeft || missing.offsetParent) ? 'true' : 'false')); let hidingStyle = getComputedStyle(hiding); console.log('Hiding visible: ' + (hidingStyle['display'] !== 'none' && hidingStyle['visibility'] !== 'hidden' && hidingStyle['opacity'] > 0.1 ? 'true' : 'false')); console.log('Hiding in DOM and visible: ' + (!!(hiding.offsetHeight || hiding.offsetWidth || hiding.offsetTop || hiding.offsetLeft || hiding.offsetParent) ? 'true' : 'false')); let misplacedStyle = getComputedStyle(misplaced); console.log('Misplaced visible: ' + (misplacedStyle['display'] !== 'none' && misplacedStyle['visibility'] !== 'hidden' && misplacedStyle['opacity'] > 0.1 ? 'true' : 'false')); console.log('Misplaced in DOM and visible: ' + (!!(misplaced.offsetHeight || misplaced.offsetWidth || misplaced.offsetTop || misplaced.offsetLeft || misplaced.offsetParent) ? 'true' : 'false')); let meltingStyle = getComputedStyle(melting); console.log('Melting visible: ' + (meltingStyle['display'] !== 'none' && meltingStyle['visibility'] !== 'hidden' && meltingStyle['opacity'] > 0.1 ? 'true' : 'false')); console.log('Melting in DOM and visible: ' + (!!(melting.offsetHeight || melting.offsetWidth || melting.offsetTop || melting.offsetLeft || melting.offsetParent) ? 'true' : 'false'));

Run results for: Offsets only vs computedStyle v2

Offsets only

ComputedStyle only

Offset then computedStyle

ComputedStyle then offset