Benchmark: clientHeight vs offsetHeight vs getComputedStyle

HTML Preparation code:

<div id="teste">teste</div>

Tests:

clientHeight
document.getElementById('teste').clientHeight;
offsetHeight
document.getElementById('teste').offsetHeight;
window.getComputedStyle
parseFloat(window.getComputedStyle(document.getElementById('teste'))['height'])
Multiple: Only _style
let style1 = window.getComputedStyle(document.getElementById('teste')) parseFloat(style1['margin-top']) parseFloat(style1['margin-bottom']) parseFloat(style1['height'])
Multiple: _style e clientHeight
let style2 = window.getComputedStyle(document.getElementById('teste')) parseFloat(style2['margin-top']) parseFloat(style2['margin-bottom']) document.getElementById('teste').clientHeight;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
clientHeight
offsetHeight
window.getComputedStyle
Multiple: Only _style
Multiple: _style e clientHeight

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Safari 16 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
clientHeight	5718384.5 Ops/sec
offsetHeight	5777246.5 Ops/sec
window.getComputedStyle	2501125.0 Ops/sec
Multiple: Only _style	1434467.8 Ops/sec
Multiple: _style e clientHeight	1555098.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Overview**

The benchmark measures the execution time of various ways to access and manipulate CSS styles of an HTML element. The test case uses an `<div>` element with the ID "teste" and retrieves its clientHeight, offsetHeight, or computes its style using `window.getComputedStyle`.

**Options Compared**

There are four options compared in this benchmark:

1. `clientHeight`: Directly accessing the `clientHeight` property of the HTML element.
2. `offsetHeight`: Accessing the `offsetHeight` property of the HTML element.
3. `window.getComputedStyle`: Using the `getComputedStyle` method to retrieve the style information for the HTML element.
4. `Multiple: Only _style` and `Multiple: _style e clientHeight` : These are variations that combine accessing styles directly with `clientHeight` or just styles using `window.getComputedStyle`.

**Pros and Cons of Each Approach**

1. **clientHeight**: Fastest approach, as it directly accesses the property without any additional computation.
	* Pros: Efficient, straightforward.
	* Cons: May not work in all situations (e.g., when the element has a complex style).
2. **offsetHeight**: Slightly slower than `clientHeight`, but still relatively fast.
	* Pros: Works even when `clientHeight` is not available or overridden by styles.
	* Cons: Requires an extra DOM lookup, which can introduce overhead.
3. **window.getComputedStyle**: Slower than the other two approaches, as it involves a separate computation to retrieve style information.
	* Pros: Works in all situations, including when styles are complex or overridden.
	* Cons: More expensive due to additional computation and potential DOM lookup.

**Library Used**

There is no explicit library mentioned in the benchmark definition or test cases. However, `window.getComputedStyle` uses the Web APIs for CSS styling, which is a standard part of the web platform.

**Special JS Features or Syntax**

There are no specific JavaScript features or syntax used beyond what's required to access and manipulate CSS styles (e.g., dot notation, property names like `clientHeight`, `offsetHeight`, etc.).

**Alternatives**

If you wanted to compare these approaches in a different context or with alternative methods, some possible alternatives could be:

* Using a library like jQuery or a similar framework for accessing DOM elements and styles.
* Implementing your own style retrieval mechanism using JavaScript functions or loops.
* Comparing performance with other modern web technologies, such as CSS Grid or Flexbox.

Keep in mind that the specific benchmark and its results are likely designed to highlight the performance differences between these approaches, rather than being a comprehensive evaluation of all possible methods.

Related benchmarks:

clientHeight vs offsetHeight vs getComputedStyle (version: 0)

Comparing performance of: clientHeight vs offsetHeight vs window.getComputedStyle vs Multiple: Only _style vs Multiple: _style e clientHeight

Created: 3 years ago by: Guest

Jump to the latest result

clientHeight

offsetHeight

window.getComputedStyle

Multiple: Only _style

Multiple: _style e clientHeight

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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