Benchmark: Get precise height : getComputedStyle vs getBoundingClientRect vs innerHeight no slice

HTML Preparation code:

<div id="foo"></div>

Tests:

getComputedStyle
var i = 5000; while (i--) { checkDisplay('foo'); } function checkDisplay(id) { return window.getComputedStyle(document.getElementById(id), null).getPropertyValue("height"); }
getBoundingClientRect
var i = 5000; while (i--) { checkDisplay('foo'); } function checkDisplay(id) { return document.getElementById(id).getBoundingClientRect().height; }
clientHeight
var i = 5000; while (i--) { checkDisplay('foo'); } function checkDisplay(id) { return document.getElementById(id).clientHeight; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getComputedStyle
getBoundingClientRect
clientHeight

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 125 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
getComputedStyle	150.1 Ops/sec
getBoundingClientRect	205.3 Ops/sec
clientHeight	290.3 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 benchmark and explain what is being tested.

**Benchmark Description**

The benchmark measures the performance of three different approaches to retrieve the height of an HTML element:

1. `getComputedStyle`: Uses the `getComputedStyle` method to get the computed style attribute of the element.
2. `getBoundingClientRect`: Uses the `getBoundingClientRect` method to get the size of the bounding rectangle of the element.
3. `clientHeight`: Uses the `clientHeight` property to get the height of the element's content area.

**Approaches Comparison**

The three approaches are compared in terms of their performance, which is measured by the number of executions per second.

* **getComputedStyle**: This approach is considered slower because it:
	+ Requires a single DOM query to retrieve the element.
	+ Uses a CSSOM (CSS Object Model) API call to get the computed style attribute, which can be slow due to the complexity of CSS calculations.
	+ Returns an object with various properties, including `height`, which may require additional processing.
* **getBoundingClientRect**: This approach is considered faster because it:
	+ Is generally faster than `getComputedStyle` since it doesn't involve a CSSOM API call and returns only the height property.
	+ Requires only one DOM query to retrieve the element.
* **clientHeight**: This approach is considered slower than `getBoundingClientRect` but potentially faster than `getComputedStyle` since it:
	+ Returns only the height of the content area, which may be less computationally expensive.
	+ May be optimized by the browser.

**Library and Special JS Feature**

There are no libraries used in this benchmark. However, note that `getComputedStyle` uses a proprietary API (CSSOM) that is not part of the standard JavaScript API.

**Considerations**

When choosing an approach, consider the following factors:

* **Accuracy**: If you need precise control over the element's style and layout, `getComputedStyle` might be a better choice.
* **Performance**: If speed is critical, `getBoundingClientRect` or `clientHeight` might be a better option.
* **Code simplicity**: `clientHeight` requires less code than `getComputedStyle` or `getBoundingClientRect`.

**Alternatives**

Other approaches to retrieve an element's height include:

* Using the `offsetHeight` property (not shown in this benchmark).
* Creating a custom function to calculate the height based on the element's size and layout.

Keep in mind that these alternatives might have different performance characteristics compared to the methods tested in this benchmark.

Related benchmarks:

Get precise height : getComputedStyle vs getBoundingClientRect vs innerHeight no slice (version: 0)

Comparing performance of: getComputedStyle vs getBoundingClientRect vs clientHeight

Created: one year ago by: Guest

Jump to the latest result

getComputedStyle

getBoundingClientRect

clientHeight

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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