Benchmark: window.getComputedStyle vs. getBoundingClientRect width calculation

HTML Preparation code:

<div id="foo">This is a text</div>

Tests:

getComputedStyle
var i = 5000; while (i--) { checkDisplay('foo'); } function checkDisplay(id) { return window.getComputedStyle(document.getElementById(id), null).getPropertyValue("width"); }
getBoundingClientRect
var i = 5000; while (i--) { checkDisplay('foo'); } function checkDisplay(id) { return document.getElementById(id).getBoundingClientRect().width; }

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 year ago)

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

Browser/OS: Chrome 116 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
getComputedStyle	43.9 Ops/sec
getBoundingClientRect	66.3 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 benchmark and explain what's being tested.

**Overview**

The benchmark compares two approaches to calculate the width of an HTML element: `window.getComputedStyle` and `document.getElementById().getBoundingClientRect().width`.

**Test Cases**

There are two test cases:

1. **getComputedStyle**: This test case uses a loop to repeatedly call `checkDisplay('foo')`, where `checkDisplay` function calculates the width of the HTML element with id "foo" using `window.getComputedStyle`.
2. **getBoundingClientRect**: This test case uses a similar approach as the first one, but instead of using `window.getComputedStyle`, it directly accesses the `getBoundingClientRect()` method on the `document.getElementById('foo')`.

**Library and Purpose**

In both test cases, the `checkDisplay` function is not a built-in JavaScript library or syntax. It's a custom function created to measure the performance difference between these two approaches.

However, `document.getElementById` and `window.getComputedStyle` are built-in JavaScript APIs that interact with the DOM (Document Object Model).

**Special JS Features/Syntax**

There isn't any specific special JavaScript feature or syntax used in this benchmark. The code only relies on standard JavaScript functionality.

**Pros and Cons of Approaches**

Here's a brief summary of each approach:

1. **getComputedStyle**:
	* Pros: More accurate, as it takes into account the element's layout and box model.
	* Cons: Can be slower due to the need to fetch additional metadata from the browser.
2. **getBoundingClientRect**:
	* Pros: Faster, as it provides a more direct access to the element's size and position.
	* Cons: May not provide accurate results for elements with complex layouts or box models.

**Other Alternatives**

If you want to compare these two approaches in different scenarios, you could also consider using other methods:

1. **Client-side CSSOM**: Instead of `getComputedStyle`, you could use the Client-side CSS Object Model (CSSOM) API to access the element's styles.
2. **Server-side rendering**: You could measure the performance difference between these approaches when rendered on the server, rather than client-side.

Keep in mind that each approach has its own trade-offs and may not be suitable for all scenarios.

Related benchmarks:

window.getComputedStyle vs. getBoundingClientRect width calculation (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):