Benchmark: cached getComputedStyle vs. getBoundingClientRect 442

HTML Preparation code:

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

Tests:

getComputedStyle
const elem = document.getElementById("foo"); var i = 5000; while (i--) { getHeight(); } function getHeight() { return parseFloat(getComputedStyle(elem).height); }
getBoundingClientRect
const elem = document.getElementById("foo"); var i = 5000; while (i--) { getHeight(); } function getHeight() { return elem.getBoundingClientRect().height; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getComputedStyle
getBoundingClientRect

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

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

Browser/OS: Chrome 120 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
getComputedStyle	166.9 Ops/sec
getBoundingClientRect	319.9 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in the provided JSON benchmark.

**Benchmark Overview**

The test measures the performance difference between two methods to get the height of an HTML element:

1. `getComputedStyle(elem).height`
2. `elem.getBoundingClientRect().height`

**Options Compared**

Two options are compared:

a. `getComputedStyle` method:
	* Uses the `getComputedStyle()` function to dynamically compute the CSS styles of an element.
	* Returns the computed style value for a specific property (in this case, `height`).
	* Can be slower due to the additional computation and parsing required.

b. `getBoundingClientRect` method:
	* Uses the `getBoundingClientRect()` method to get the size of an element relative to its nearest positioned ancestor.
	* Returns the bounding rectangle's properties (x, y, width, height) for the given element.
	* Typically faster since it only returns a single value (the height in this case).

**Pros and Cons**

a. `getComputedStyle` method:

Pros:

* More explicit control over CSS styles
* Allows for more advanced styling and layout calculations

Cons:

* Slower due to additional computation and parsing required
* May be less suitable for performance-critical applications

b. `getBoundingClientRect` method:

Pros:

* Faster since it only returns a single value (the height)
* More straightforward to implement, as it's a built-in DOM method

Cons:

* Less explicit control over CSS styles
* May not work as expected in certain edge cases (e.g., when the element is floated or has complex layout)

**Library and Special JS Features**

In this benchmark, no specific libraries are used beyond the standard JavaScript DOM API. However, it's worth noting that `getComputedStyle` relies on the CSSOM (CSS Object Model) specification, which can provide additional features for working with styles.

The use of `getBoundingClientRect` is a standard DOM method in modern browsers.

**Other Alternatives**

If you need to measure the performance difference between these two methods, you could also consider using:

* `document.documentElement.style.top` and `elem.offsetTop` (using absolute positioning)
* `elem.offsetWidth` and `elem.offsetHeight` (using width and height properties)

Keep in mind that these alternatives may have different pros and cons compared to the `getComputedStyle` and `getBoundingClientRect` methods.

**Benchmark Preparation Code**

The provided HTML preparation code is:

```html
<div id="foo">test</div>
```

This creates a simple HTML element with an ID of "foo", which is used as the test subject in both benchmark cases.

Related benchmarks:

cached getComputedStyle vs. getBoundingClientRect 442 (version: 0)

Comparing performance of: getComputedStyle vs getBoundingClientRect

Created: 2 years ago by: Guest

Jump to the latest result

getComputedStyle

getBoundingClientRect

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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