Benchmark: getComputedStyle vs getBoundingClientRect

HTML Preparation code:

<div id="foo" style="width: 100px; height: 100px"></div>

Script Preparation code:

var foo = document.querySelector('#foo');

Tests:

getComputedStyle
var { height } = parseInt(getComputedStyle(foo));
getBoundingClientRect
var { height } = foo.getBoundingClientRect();

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: one month ago)

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

Browser/OS: Chrome 146 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
getComputedStyle	5731164.5 Ops/sec
getBoundingClientRect	2454699.2 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided benchmark measures the performance difference between two ways to access an element's size: `getComputedStyle` and `getBoundingClientRect`. Let's dive into the details.

**Options being compared:**

1. **getComputedStyle**: This method retrieves the computed style of an element as a CSSStyleDeclaration object, which includes properties like width, height, etc.
2. **getBoundingClientRect**: This method returns the size of an element in pixels (i.e., width and height), relative to the element's viewport.

**Pros and Cons:**

* `getComputedStyle` is generally slower than `getBoundingClientRect` because it:
	+ Involves parsing CSS rules, which can be time-consuming.
	+ May require additional DOM lookups (e.g., to get the style attribute).
* `getBoundingClientRect`, on the other hand, is faster since:
	+ It only returns a simple size value without needing to parse CSS rules or perform additional DOM lookups.

However, `getComputedStyle` can be more useful in certain situations:

* When you need to retrieve specific styles (e.g., border-radius, font-size) beyond just width and height.
* When working with styles that are not directly applicable to the element's size (e.g., transform properties).

**Library usage:**

There is no explicit library mentioned in this benchmark. However, `getComputedStyle` relies on the `window.getComputedStyle()` function or `document.defaultView.getComputedStyle()`, which is part of the DOM API.

**Special JS feature/syntax:**

None explicitly mentioned. The code uses standard JavaScript syntax and doesn't rely on any specific features like ES6 classes, async/await, or promises.

**Other alternatives:**

If you need to measure performance differences between similar methods (e.g., other approaches to get an element's size), consider using:

* `getCSSLength()`: This method returns the length of a CSS property value as a number. It's faster than `getComputedStyle`, but still slower than `getBoundingClientRect`.
* `offsetWidth`/`offsetHeight`: These methods return the width and height of an element, respectively, by taking into account padding and border widths.
* `clientWidth`/`clientHeight`: These methods return the width and height of an element's content area.

Keep in mind that each approach has its trade-offs, so choose the one that best fits your specific use case.

Related benchmarks:

getComputedStyle vs getBoundingClientRect (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):