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; }

Historical Performance Data aggregated from 16 community runs

Desktop Results:

Chrome 16 runs

clientHeight

286/s

getBoundingClientRect

191/s

getComputedStyle

122/s

Fastest: clientHeight (2.3x faster)

View exact numbers

✓ clientHeight: 286 ops/sec
• getBoundingClientRect: 191 ops/sec
• getComputedStyle: 122 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
getComputedStyle
getBoundingClientRect
clientHeight

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 4 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:148.0) Gecko/20100101 Firefox/148.0

Browser/OS: Firefox 148 on Mac OS X 10.15

View result in a separate tab

clientHeight

2K/s

getBoundingClientRect

895/s

getComputedStyle

503/s

View exact numbers

Test name	Executions per second
✓ clientHeight	1,784 Ops/sec
getBoundingClientRect	895 Ops/sec
getComputedStyle	503 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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.

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

Comparing performance of: `getComputedStyle vs getBoundingClientRect vs clientHeight`

Created: 4 years ago by: Registered User

Go to the latest result

getComputedStyle

getBoundingClientRect

clientHeight

Historical Performance Data aggregated from 16 community runs

Desktop Results:

Chrome 16 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

Comparing performance of: getComputedStyle vs getBoundingClientRect vs clientHeight

Created: 4 years ago by: Registered User

Go to the latest result

getComputedStyle

getBoundingClientRect

clientHeight

Historical Performance Data aggregated from 16 community runs

Desktop Results:

Chrome 16 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: `getComputedStyle vs getBoundingClientRect vs clientHeight`