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

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: 5 months ago)

User agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:128.0) Gecko/20100101 Firefox/128.0

Browser/OS: Firefox 128 on Ubuntu

View result in a separate tab

Test name	Executions per second
getComputedStyle	213.1 Ops/sec
getBoundingClientRect	368.7 Ops/sec
clientheight	817.7 Ops/sec

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

Related benchmarks:

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

Comparing performance of: getComputedStyle vs getBoundingClientRect vs clientheight

Created: 2 years ago by: Guest

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 2 months ago):