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;

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: 13 days ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36

Browser/OS: Chrome 133 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
clientHeight	4227661.0 Ops/sec
offsetHeight	4298922.0 Ops/sec
window.getComputedStyle	1991010.2 Ops/sec
Multiple: Only _style	878290.2 Ops/sec
Multiple: _style e clientHeight	1147003.6 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 5 months 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.

Related benchmarks:

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: 5 years ago by: Registered User

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