Benchmark: Offsets only vs computedStyle v2

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'));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Offsets only
ComputedStyle only
Offset then computedStyle
ComputedStyle then offset

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

I'll provide the answer based on the provided benchmark results.

The test names indicate that the tests are measuring the performance difference between accessing `offset` and `computedStyle` properties of an element in different orders.

**Offsets only:**

* Chrome 111, Desktop, Windows, 9938.13671875 executions/second
* This result suggests that accessing `offset` properties is faster than accessing `computedStyle` properties, which may be due to the fact that `offset` properties are calculated directly from the DOM node's position, whereas `computedStyle` requires parsing and evaluating CSS styles.

**ComputedStyle only:**

* Chrome 111, Desktop, Windows, 9838.8564453125 executions/second
* This result suggests that accessing `computedStyle` properties is faster than accessing `offset` properties, which may be due to the fact that `computedStyle` requires more processing power and memory access.

**Offset then computedStyle:**

* Chrome 111, Desktop, Windows, 4111.20458984375 executions/second
* This result suggests that accessing `offset` properties first and then accessing `computedStyle` properties is slower than accessing either property directly.

**ComputedStyle then offset:**

* Chrome 111, Desktop, Windows, 3995.90576171875 executions/second
* This result suggests that accessing `computedStyle` properties first and then accessing `offset` properties is faster than the other two orderings.

In summary, based on these results:

1. Accessing `offset` properties directly is generally faster.
2. Accessing `computedStyle` properties directly can be faster in some cases.
3. The optimal ordering depends on the specific test case and may not always result in a clear winner.

Keep in mind that these results are specific to Chrome 111, Desktop, Windows platform, and may not generalize to other browsers or platforms.

Related benchmarks:

Offsets only vs computedStyle v2 (version: 3)

Comparing performance of: Offsets only vs ComputedStyle only vs Offset then computedStyle vs ComputedStyle then offset

Created: 5 years ago by: Registered User

Jump to the latest result

Offsets only

ComputedStyle only

Offset then computedStyle

ComputedStyle then offset

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):