Benchmark: Get precise height : getComputedStyle vs getBoundingClientRect vs innerHeight

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").slice(0, -2); }
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: 26 days ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Mobile Safari/537.36 EdgA/134.0.0.0

Browser/OS: Chrome Mobile 134 on Android

View result in a separate tab

Test name	Executions per second
getComputedStyle	20.5 Ops/sec
getBoundingClientRect	59.4 Ops/sec
clientHeight	102.9 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript benchmarks!

**What is being tested?**

The provided benchmark measures the performance of three different approaches to retrieve an element's height in JavaScript:

1. **`window.getComputedStyle(document.getElementById(id), null).getPropertyValue("height").slice(0, -2")`**: This method retrieves the computed style attribute for the `height` property and then extracts a substring from it. The `.slice(-2)` part is used to remove the trailing unit (e.g., "px").
2. **`document.getElementById(id).getBoundingClientRect().height`**: This method uses the `getBoundingClientRect()` method, which returns a rectangular region that represents the element's size and position relative to the viewport.
3. **`document.getElementById(id).clientHeight`**: This method simply returns the client height of the element, which is the element's own height without any padding or border.

**Options compared**

The benchmark compares the performance of these three approaches on a `<div>` element with an ID of "foo".

**Pros and Cons:**

* **`window.getComputedStyle()`**:
	+ Pros: This method provides more accurate results, as it takes into account layout and styling issues.
	+ Cons: It can be slower than other methods because it requires additional computations to retrieve the computed style attribute.
* **`getBoundingClientRect()`**:
	+ Pros: This method is generally faster than `window.getComputedStyle()`, as it returns a pre-calculated rectangle.
	+ Cons: It may not provide accurate results if the element's layout or positioning changes during execution, which can lead to inconsistent results.
* **`clientHeight`**:
	+ Pros: This method is simple and fast, but it only provides an approximate value of the element's height, as it doesn't take into account padding or border sizes.

**Libraries**

None are explicitly mentioned in the provided benchmark code. However, if you're using a library like jQuery or a CSS preprocessor like Sass, they might provide additional functions for working with elements and their styles.

**Special JS features or syntax**

The benchmark uses JavaScript's `while` loop and function definitions to create a simple script that runs 5000 times in a row. This is a basic example of JavaScript's execution context and control flow.

**Alternatives**

If you're looking for alternative approaches, you might consider:

* Using Web Workers or Web Assembly to parallelize computations
* Optimizing the element's layout using CSS transforms or animation libraries like GSAP
* Utilizing a library like Lodash or Ramda for functional programming and performance optimizations

Keep in mind that benchmarking JavaScript performance is complex and depends on various factors, including the specific use case, browser version, and hardware configuration.

Related benchmarks:

Get precise height : getComputedStyle vs getBoundingClientRect vs innerHeight (version: 1)

Comparing performance of: getComputedStyle vs getBoundingClientRect vs clientHeight

Created: 2 years ago by: Registered User

Jump to the latest result

getComputedStyle

getBoundingClientRect

clientHeight

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):