Benchmark: window.getComputedStyle vs. getBoundingClientRect

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

Historical Performance Data aggregated from 123 community runs

Desktop Results:

Chrome 95 runs

getComputedStyle

405/s

getBoundingClientRect

216/s

Fastest: getComputedStyle (1.9x faster)

View exact numbers

✓ getComputedStyle: 405 ops/sec
• getBoundingClientRect: 216 ops/sec

Firefox 23 runs

getBoundingClientRect

413/s

getComputedStyle

261/s

Fastest: getBoundingClientRect (1.6x faster)

View exact numbers

✓ getBoundingClientRect: 413 ops/sec
• getComputedStyle: 261 ops/sec

Mobile Results:

Safari 5 runs

getComputedStyle

934/s

getBoundingClientRect

801/s

Fastest: getComputedStyle (1.2x faster)

View exact numbers

✓ getComputedStyle: 934 ops/sec
• getBoundingClientRect: 801 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36

Browser/OS: Chrome 148 on Windows

View result in a separate tab

getComputedStyle

458/s

getBoundingClientRect

179/s

View exact numbers

Test name	Executions per second
✓ getComputedStyle	458 Ops/sec
getBoundingClientRect	179 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what is being tested.

**Benchmark Definition**

The benchmark definition provides two options for comparison:

1. `window.getComputedStyle(document.getElementById(id), null).getPropertyValue("display") === "none"`
2. `document.getElementById(id).getBoundingClientRect().width === 0`

These options are essentially checking whether an HTML element with the id "foo" has its display property set to none or if its width is zero, respectively.

**Pros and Cons of Different Approaches**

1. **`window.getComputedStyle` approach**: This method uses the Web API to retrieve the computed style properties of an element. It's a more comprehensive way to get all the styles applied to an element, including layout-specific styles like display.

Pros: More accurate, especially for elements with complex layouts.
   
   Cons: Can be slower due to the overhead of getting all the styles and then filtering them out.

2. **`getBoundingClientRect` approach**: This method uses the Web API to get the bounding rectangle of an element, which includes its width, height, left, top, and more. By checking if the width is zero, it can be used as a proxy for checking if the display property is none.

Pros: Faster than `window.getComputedStyle` since it only returns specific properties.
   
   Cons: Does not account for layout-specific styles like display, which could lead to false negatives.

**Library and Its Purpose**

In both test cases, the `checkDisplay` function uses the `document.getElementById(id)` method to retrieve an element by its id. This is a standard JavaScript API that allows accessing HTML elements by their id attribute.

No specific library is being used in this benchmark, as it's a basic comparison between two built-in Web APIs.

**Special JS Features or Syntax**

None of the code uses special JavaScript features or syntax beyond what's covered by the standard Web APIs.

**Other Alternatives**

If you wanted to compare these methods more thoroughly, you could also consider using other approaches:

1. **`getComputedStyle` with a specific property**: Instead of checking `display`, you could check other properties like `width`, `height`, etc.
2. **`getBoundingClientRect` with multiple values**: You could use multiple values for the width to check for different display states (e.g., 0, 10, and 100).
3. **Using a CSS-in-JS solution**: Instead of using the native Web API, you could define styles in JavaScript and then access them using `window.getComputedStyle`.
4. **Profiling libraries**: You could use profiling libraries like `chrome-devtools-protocol` or `perf_hooks` to get more detailed performance metrics.

Keep in mind that these alternatives would add complexity to the benchmark and might not provide significant improvements for this specific test case.

window.getComputedStyle vs. getBoundingClientRect (version: 0)

Comparing performance of: `getComputedStyle vs getBoundingClientRect`

Created: 4 years ago by: Guest

Go to the latest result

getComputedStyle

getBoundingClientRect

Historical Performance Data aggregated from 123 community runs

Desktop Results:

Chrome 95 runs

Firefox 23 runs

Mobile Results:

Safari 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

window.getComputedStyle vs. getBoundingClientRect (version: 0)

Comparing performance of: getComputedStyle vs getBoundingClientRect

Created: 4 years ago by: Guest

Go to the latest result

getComputedStyle

getBoundingClientRect

Historical Performance Data aggregated from 123 community runs

Desktop Results:

Chrome 95 runs

Firefox 23 runs

Mobile Results:

Safari 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `getComputedStyle vs getBoundingClientRect`