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;

Historical Performance Data aggregated from 37 community runs

Desktop Results:

Chrome 30 runs

clientHeight

1.6M/s

offsetHeight

1.5M/s

getBoundingClientRect

1.0M/s

Fastest: clientHeight (1.5x faster)

View exact numbers

✓ clientHeight: 1,613,625 ops/sec
• offsetHeight: 1,477,156 ops/sec
• getBoundingClientRect: 1,046,514 ops/sec

Firefox 7 runs

clientHeight

4.7M/s

offsetHeight

4.2M/s

getBoundingClientRect

2.3M/s

Fastest: clientHeight (2.0x faster)

View exact numbers

✓ clientHeight: 4,658,453 ops/sec
• offsetHeight: 4,249,774 ops/sec
• getBoundingClientRect: 2,323,792 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
getBoundingClientRect

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

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

Browser/OS: Chrome 151 on Windows

View result in a separate tab

offsetHeight

2.2M/s

clientHeight

2.1M/s

getBoundingClientRect

1.5M/s

View exact numbers

Test name	Executions per second
✓ offsetHeight	2,173,186 Ops/sec
clientHeight	2,064,803 Ops/sec
getBoundingClientRect	1,508,805 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`.

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

Comparing performance of: `clientHeight vs offsetHeight vs getBoundingClientRect`

Created: 2 years ago by: Guest

Go to the latest result

clientHeight

offsetHeight

getBoundingClientRect

Historical Performance Data aggregated from 37 community runs

Desktop Results:

Chrome 30 runs

Firefox 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 getBoundingClientRect().height (version: 0) Benchmark.js

Comparing performance of: clientHeight vs offsetHeight vs getBoundingClientRect

Created: 2 years ago by: Guest

Go to the latest result

clientHeight

offsetHeight

getBoundingClientRect

Historical Performance Data aggregated from 37 community runs

Desktop Results:

Chrome 30 runs

Firefox 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 getBoundingClientRect`