Benchmark: cached getComputedStyle vs. getBoundingClientRect

HTML Preparation code:

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

Tests:

getComputedStyle
const elem = document.getElementById("foo"); const computed = getComputedStyle(elem); var i = 5000; while (i--) { getHeight(); } function getHeight() { return parseFloat(computed.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: yesterday)

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

Browser/OS: Firefox 133 on Linux

View result in a separate tab

Test name	Executions per second
getComputedStyle	585.7 Ops/sec
getBoundingClientRect	572.9 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 benchmark and explain what is tested, compared, pros and cons of different approaches, library usage, special JavaScript features, and other considerations.

**What is being tested?**

Two individual test cases are being run:

1. `getComputedStyle`: This test case measures the execution time of getting the computed style of an element using the `getComputedStyle()` function.
2. `getBoundingClientRect`: This test case measures the execution time of getting the bounding rectangle of an element using the `getBoundingClientRect()` function.

**Options compared**

The two options being compared are:

1. Using `getComputedStyle()` to get the computed style of an element
2. Using `getBoundingClientRect()` to get the bounding rectangle of an element

**Pros and cons of each approach**

1. **getComputedStyle()**
	* Pros:
		+ Provides accurate measurements of CSS styles
		+ Allows for precise control over styling
	* Cons:
		+ May be slower due to additional DOM queries and calculations
		+ May not work well with animated or dynamic content
2. **getBoundingClientRect()**
	* Pros:
		+ Faster execution time compared to `getComputedStyle()`
		+ Works well with animated or dynamic content
	* Cons:
		+ May provide less accurate measurements of CSS styles
		+ May require additional calculations for precise styling

**Library usage**

There is no explicit library mentioned in the benchmark definitions. However, it's likely that these functions are part of the browser's DOM API.

**Special JavaScript features**

None are explicitly mentioned, but it's worth noting that both `getComputedStyle()` and `getBoundingClientRect()` can be affected by browser-specific quirks or performance optimizations.

**Other considerations**

1. **Browser differences**: The benchmark is run on a Chrome 126 browser on a Mac OS X 10.15.7 machine.
2. **Test setup**: Each test case involves creating an HTML element, getting its computed style using `getComputedStyle()` or bounding rectangle using `getBoundingClientRect()`, and then repeating this process 5000 times while measuring the execution time.

**Alternatives**

Other alternatives for measuring CSS styles or bounding rectangles might include:

1. Using a separate library like jQuery UI's `.css()` function or a third-party library like CSS-Utils.
2. Using other browser-specific APIs, such as WebKit's `layoutLayout` API (for WebKit-based browsers).
3. Implementing a custom solution using JavaScript and/or WebGL (for high-performance applications).

Related benchmarks:

cached getComputedStyle vs. getBoundingClientRect (version: 0)

Comparing performance of: getComputedStyle vs getBoundingClientRect

Created: one year ago by: Guest

Jump to the latest result

getComputedStyle

getBoundingClientRect

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):