Benchmark: window.getComputedStyle vs. getBoundingClientRect vs clientHeight

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("display") === "none"; }
getBoundingClientRect
var i = 5000; while (i--) { checkDisplay('foo'); } function checkDisplay(id) { return document.getElementById(id).getBoundingClientRect().width === 0; }
clientheight
var i = 5000; while (i--) { checkDisplay('foo'); } function checkDisplay(id) { return document.getElementById(id).clientHeight === 0; }

Historical Performance Data aggregated from 43 community runs

Desktop Results:

Chrome 34 runs

getComputedStyle

789/s

clientheight

567/s

getBoundingClientRect

380/s

Fastest: getComputedStyle (2.1x faster)

View exact numbers

✓ getComputedStyle: 789 ops/sec
• clientheight: 567 ops/sec
• getBoundingClientRect: 380 ops/sec

Firefox 9 runs

clientheight

1K/s

getBoundingClientRect

652/s

getComputedStyle

425/s

Fastest: clientheight (2.9x faster)

View exact numbers

✓ clientheight: 1,233 ops/sec
• getBoundingClientRect: 652 ops/sec
• getComputedStyle: 425 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: 2 months ago)

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

Browser/OS: Chrome 145 on Windows

View result in a separate tab

getComputedStyle

468/s

clientheight

309/s

getBoundingClientRect

207/s

View exact numbers

Test name	Executions per second
✓ getComputedStyle	468 Ops/sec
clientheight	309 Ops/sec
getBoundingClientRect	207 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 JSON data and explain what's being tested.

**Benchmark Definition**

The benchmark measures the performance of three different ways to check if an element is invisible: `window.getComputedStyle`, `document.getElementById().getBoundingClientRect()`, and `document.getElementById().clientHeight`.

In each test case, a loop is executed 5000 times, checking the display status of an HTML element with the id "foo" using each of the three methods.

**Options Compared**

The three options being compared are:

1. **window.getComputedStyle**: This method returns a CSSStyleDeclaration object that reflects the style computed by the browser for the given element.
2. **document.getElementById().getBoundingClientRect()**: This method returns a DOMRect object representing the bounding rectangle of the element, which includes its width and height.
3. **document.getElementById().clientHeight**: This method returns the height of the element's content rectangle.

**Pros and Cons**

1. **window.getComputedStyle**:
	* Pros: More accurate for checking display styles, as it takes into account any CSS rules that may affect the display property.
	* Cons: Can be slower due to the overhead of computing the style declaration, especially if the element has complex styles.
2. **document.getElementById().getBoundingClientRect()**:
	* Pros: Faster than `window.getComputedStyle` since it only returns a simple rectangle object.
	* Cons: May not accurately reflect the display state if the element's size or position changes dynamically.
3. **document.getElementById().clientHeight**:
	* Pros: Fastest of the three options, as it simply returns a single value.
	* Cons: May return an incorrect result if the element's height is not available or has changed since the last time the height was measured.

**Libraries and Special JS Features**

None of the test cases use any external libraries. However, they do utilize some special JavaScript features:

1. **Firefox 128**: This browser version uses Gecko/20100101 as its engine version, which is an older version that may behave differently than more modern browsers.
2. **Desktop and Ubuntu**: These specify the device platform and operating system, allowing for better tracking of results on specific hardware configurations.

**Other Alternatives**

Some alternative approaches could be:

1. Using `display` property directly: Instead of using `window.getComputedStyle`, you could simply check if the `display` property is set to `"none"`.
2. Using `offsetHeight` and `offsetWidth`: Similar to `clientHeight`, but takes into account any padding or border that may affect the element's size.
3. Using CSS variables: If you're using CSS variables (CSS Custom Properties), you could use them to store the display value and then compare it.

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

window.getComputedStyle vs. getBoundingClientRect vs clientHeight (version: 0)

Comparing performance of: `getComputedStyle vs getBoundingClientRect vs clientheight`

Created: 3 years ago by: Guest

Go to the latest result

getComputedStyle

getBoundingClientRect

clientheight

Historical Performance Data aggregated from 43 community runs

Desktop Results:

Chrome 34 runs

Firefox 9 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

window.getComputedStyle vs. getBoundingClientRect vs clientHeight (version: 0)

Comparing performance of: getComputedStyle vs getBoundingClientRect vs clientheight

Created: 3 years ago by: Guest

Go to the latest result

getComputedStyle

getBoundingClientRect

clientheight

Historical Performance Data aggregated from 43 community runs

Desktop Results:

Chrome 34 runs

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