Benchmark: clientHeight vs offsetHeight vs window.getComputedStyle

HTML Preparation code:

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

Script Preparation code:

var teste_n = '123px';
var _style = window.getComputedStyle(document.getElementById('teste'));

Tests:

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

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 runs

offsetHeight

1.1M/s

clientHeight

1.1M/s

window.getComputedStyle

540K/s

Multiple: _style e clientHeight

304K/s

Multiple: Only _style

247K/s

Fastest: offsetHeight (4.5x faster)

View exact numbers

✓ offsetHeight: 1,105,358 ops/sec
• clientHeight: 1,073,960 ops/sec
• window.getComputedStyle: 539,964 ops/sec
• Multiple: _style e clientHeight: 304,260 ops/sec
• Multiple: Only _style: 246,855 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: 10 months ago)

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

Browser/OS: Chrome 140 on Windows

View result in a separate tab

clientHeight

283K/s

offsetHeight

260K/s

window.getComputedStyle

137K/s

Multiple: _style e clientHeight

60K/s

Multiple: Only _style

49K/s

View exact numbers

Test name	Executions per second
✓ clientHeight	282,845 Ops/sec
offsetHeight	259,606 Ops/sec
window.getComputedStyle	136,940 Ops/sec
Multiple: _style e clientHeight	60,298 Ops/sec
Multiple: Only _style	49,251 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON and explain what is being tested in each benchmark.

**Benchmark Definition**

The `Benchmark Definition` represents a single test case, which can be one of three options:

1. `clientHeight`: Tests the value of the `clientHeight` property of an HTML element.
2. `offsetHeight`: Tests the value of the `offsetHeight` property of an HTML element.
3. `window.getComputedStyle`: Tests the value of a CSS property retrieved using the `getComputedStyle()` method.

**Script Preparation Code**

The script preparation code is used to initialize variables and set up the environment for each test case. In this case, it sets a variable `_style` to the computed style of an HTML element with the id "teste".

**Html Preparation Code**

The html preparation code creates the necessary HTML structure for each test case. In this case, it creates a single `<div>` element with the id "teste" and assigns the text "teste" to it.

**Individual Test Cases**

There are four individual test cases:

1. `clientHeight`: Tests the value of `clientHeight` directly on the `document.getElementById('teste')`.
2. `offsetHeight`: Tests the value of `offsetHeight` directly on the `document.getElementById('teste')`.
3. `window.getComputedStyle`: Tests the value of a CSS property retrieved using `getComputedStyle()` on the `_style` variable.
4. `Multiple: Only _style` and `Multiple: _style e clientHeight` are variations that test multiple values at once, including both `clientHeight` and `offsetHeight`.

**Pros and Cons**

Here's a brief summary of the pros and cons for each approach:

1. **Direct Property Access (`clientHeight` and `offsetHeight`)**
	* Pros: Simple, straightforward, easy to understand.
	* Cons: May not work as expected in certain situations (e.g., when the element has a complex layout or is nested within another element).
2. **Using getComputedStyle() (`window.getComputedStyle`)**
	* Pros: Provides access to all CSS properties, including those that are not directly available through `clientHeight` and `offsetHeight`.
	* Cons: Can be slower than direct property access and may require more complex code.
3. **Testing Multiple Values at Once (`Multiple` test cases)**
	* Pros: Tests the performance of multiple values simultaneously, which can be useful for comparing the performance of different approaches.
	* Cons: May introduce additional complexity and variability in the results.

**Libraries and Special Features**

There is no explicit library mentioned in the provided JSON. However, `getComputedStyle()` is a built-in method in JavaScript that uses the DOM and CSSOM (Cascading Style Sheets Object Model) to retrieve information about an element's style.

No special features or syntax are used in this benchmark.

**Other Alternatives**

If you're looking for alternatives to MeasureThat.net, here are some options:

1. **Benchmark.js**: A fast and lightweight benchmarking library that allows you to create custom benchmarks.
2. **js-bench**: A popular benchmarking library that provides a simple way to measure the performance of JavaScript code.
3. **Google Benchmark**: A high-performance benchmarking library developed by Google that is designed for measuring the performance of C++ code, but can also be used with JavaScript.

These alternatives offer varying degrees of complexity and customization options compared to MeasureThat.net.

clientHeight vs offsetHeight vs window.getComputedStyle (version: 3)

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

Created: 7 years ago by: Registered User

Go to the latest result

clientHeight

offsetHeight

window.getComputedStyle

Multiple: Only _style

Multiple: _style e clientHeight

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

clientHeight vs offsetHeight vs window.getComputedStyle (version: 3)

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

Created: 7 years ago by: Registered User

Go to the latest result

clientHeight

offsetHeight

window.getComputedStyle

Multiple: Only _style

Multiple: _style e clientHeight

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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