Benchmark: clientHeight vs offsetHeight vs getBoundingClientRect().height

HTML Preparation code:

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

Tests:

clientHeight
document.getElementById('teste').clientHeight;
offsetHeight
document.getElementById('teste').offsetHeight;
getBoundingClientRect
document.getElementById('teste').getBoundingClientRect().height;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
clientHeight
offsetHeight
getBoundingClientRect

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 149 on Windows

View result in a separate tab

Test name	Executions per second
clientHeight	592545.2 Ops/sec
offsetHeight	262458.2 Ops/sec
getBoundingClientRect	214109.2 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 benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark compares three methods to get the height of an HTML element:

1. `clientHeight`
2. `offsetHeight`
3. `getBoundingClientRect().height`

These methods are commonly used in web development to measure the size of elements, but they have different implementations and potential performance implications.

**Options Compared**

Here's a brief overview of each method:

* **`clientHeight`**: Returns the height of an element relative to its parent element, taking into account any borders or margins.
	+ Pros: Generally faster and more accurate than `offsetHeight`, as it only requires one DOM lookup.
	+ Cons: May not work correctly if the element has a non-rectangular shape (e.g., rounded corners) or if the parent element is not visible.
* **`offsetHeight`**: Returns the height of an element relative to the viewport, taking into account any borders, margins, and padding.
	+ Pros: Works well for elements with non-rectangular shapes or hidden parent elements.
	+ Cons: May be slower due to the need to calculate the offset from the viewport.
* **`getBoundingClientRect().height`**: Returns the height of an element relative to the viewport, using the `getBoundingClientRect()` method, which provides more accurate results than `offsetHeight`.
	+ Pros: Generally more accurate and faster than `offsetHeight`, as it uses a single DOM lookup.
	+ Cons: May require more browser support, as not all browsers implement `getBoundingClientRect()` correctly.

**Library and Special Features**

There are no libraries used in this benchmark. However, the benchmark does use a special JavaScript feature:

* **`getBoundingClientRect()`**: Introduced in ECMAScript 2017 (ES2017), this method provides more accurate results for measuring element sizes by taking into account the element's position relative to its nearest ancestors.

**Other Alternatives**

If you need alternative methods or options, here are a few examples:

* For `clientHeight`, you could also use `getComputedStyle()` to get the computed style of the element.
* For `offsetHeight`, you could use `scrollHeight` (for elements with vertical scrollbar) or `width` and `height` (if you know the element is rectangular).
* For `getBoundingClientRect()`, you could also use `measure()` in a content script for Chrome extensions.

**Benchmark Results**

The benchmark results show the execution per second for each test case on a specific browser, device platform, and operating system. The results are:

1. `offsetHeight`: 2,362,933 executions/second
2. `clientHeight`: 2,128,213 executions/second
3. `getBoundingClientRect().height`: 1,682,833 executions/second

These results indicate that `getBoundingClientRect()` is the fastest method in this benchmark, followed by `clientHeight`, and then `offsetHeight`.

Related benchmarks:

clientHeight vs offsetHeight vs getBoundingClientRect().height (version: 0)

Comparing performance of: clientHeight vs offsetHeight vs getBoundingClientRect

Created: one year ago by: Guest

Jump to the latest result

clientHeight

offsetHeight

getBoundingClientRect

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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