Benchmark: SP: clientHeight vs offsetHeight vs getComputedStyle

HTML Preparation code:

<div id="testelement"><div style="height:123px"></div></div>

Tests:

clientHeight
testelement.clientHeight
offsetHeight
testelement.offsetHeight
getComputedStyle
window.getComputedStyle(testelement).height

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
clientHeight
offsetHeight
getComputedStyle

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 123 on Windows

View result in a separate tab

Test name	Executions per second
clientHeight	621579.7 Ops/sec
offsetHeight	641661.2 Ops/sec
getComputedStyle	318584.7 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided JSON represents a JavaScript microbenchmark created on MeasureThat.net. The benchmark compares the execution time of three different approaches to retrieve the height of an HTML element: `clientHeight`, `offsetHeight`, and using the `getComputedStyle` method.

**Test Cases**

There are three test cases:

1. **`clientHeight`**: This test case measures the execution time of accessing the `clientHeight` property directly on the `testelement` DOM node.
2. **`offsetHeight`**: This test case measures the execution time of accessing the `offsetHeight` property directly on the `testelement` DOM node.
3. **`getComputedStyle`**: This test case measures the execution time of using the `getComputedStyle` method to retrieve the `height` property from the computed style of the `testelement` element.

**Options Compared**

The benchmark compares three options:

1. **Direct Property Access**: `clientHeight` and `offsetHeight`
	* Pros: Simple, fast, and efficient.
	* Cons: May not work in all situations (e.g., when the element's parent is transparent).
2. **Using `getComputedStyle`**: `window.getComputedStyle(testelement).height`
	* Pros: Works in all situations, provides more accurate results, but may be slower due to the additional overhead of accessing the computed style.
	* Cons: May be slower than direct property access.

**Library**

None.

**Special JS Features/Syntax**

The benchmark uses the following feature:

* **CSSOM**: The `getComputedStyle` method relies on the CSS Object Model (CSSOM), which provides an interface to access and manipulate the CSS styles of elements.

**Benchmark Preparation Code**

The preparation code is simple:
```javascript
<html>
  <head></head>
  <body>
    <div id="testelement">
      <div style="height:123px"></div>
    </div>
  </body>
</html>
```
This code creates a basic HTML structure with an `<div>` element having a fixed height of `123px`. The `id` attribute is set to "testelement", which will be used by the benchmark.

**Other Alternatives**

If you wanted to create a similar benchmark, you could consider using other libraries or approaches, such as:

* Using a CSS parser like `cssom.js` instead of the native `getComputedStyle` method.
* Comparing the performance of different JavaScript engines (e.g., V8, SpiderMonkey) by running the benchmark in multiple environments.
* Adding more test cases to compare additional properties or methods, such as `offsetWidth`, `scrollHeight`, or `getBoundingClientRect`.

Keep in mind that creating a comprehensive benchmark like this one requires significant expertise and resources. MeasureThat.net's automated testing framework makes it relatively easy to create and run microbenchmarks like this one.

Related benchmarks:

SP: clientHeight vs offsetHeight vs getComputedStyle (version: 0)

Comparing performance of: clientHeight vs offsetHeight vs getComputedStyle

Created: 2 years ago by: Registered User

Jump to the latest result

clientHeight

offsetHeight

getComputedStyle

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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