Benchmark: getComputedStyle vs style.getPropertyValue vs. getBoundingClientRect

HTML Preparation code:

<div id="foo">some content <div>text</div> yet one more</div>

Tests:

style.getPropertyValue
var i = 5000; var elm = document.getElementById('foo'); while (i--) { checkDisplay(elm); } function checkDisplay(elm) { return parseInt(elm.style.getPropertyValue('width'), 10) === 0; }
getBoundingClientRect
var i = 5000; var elm = document.getElementById('foo'); while (i--) { checkDisplay(elm); } function checkDisplay(elm) { return Math.floor(elm.getBoundingClientRect().width) === 0; }
getComputedStyle
var i = 5000; var elm = document.getElementById('foo'); while (i--) { checkDisplay(elm); } function checkDisplay(elm) { return parseInt(window.getComputedStyle(elm, null).getPropertyValue('width'), 10) === 0; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
style.getPropertyValue
getBoundingClientRect
getComputedStyle

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.0.1 Safari/605.1.15

Browser/OS: Safari 18 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
style.getPropertyValue	1652.9 Ops/sec
getBoundingClientRect	713.6 Ops/sec
getComputedStyle	441.6 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):

LLMs can make mistakes. Check important info.

The benchmark provided compares the performance of three different methods for retrieving the computed width of an HTML element in JavaScript:

1. **style.getPropertyValue**
2. **getBoundingClientRect**
3. **getComputedStyle**

### Description of Options Tested

1. **style.getPropertyValue**
   - This method accesses the inline styles of an element and retrieves a specific CSS property value, in this case, the 'width'.
   - It is called on the `style` object of the element.
   - **Pros**: Fast for retrieving styles that are directly applied to the element via inline CSS.
   - **Cons**: Only retrieves inline styles, meaning it cannot access styles inherited from CSS stylesheets or styles applied through classes.

2. **getBoundingClientRect**
   - Returns a `DOMRect` object providing information about the size of an element and its position relative to the viewport. The width data is extracted from this object.
   - **Pros**: Provides up-to-date measurements of all dimensions and is useful for robust layout calculations (including handling transformations, visibility, etc.).
   - **Cons**: Slightly performance-heavy as it forces layout calculations each time it is called.

3. **getComputedStyle**
   - Retrieves all the CSS properties and values of an element after applying the CSS rules from stylesheets. It is invoked with the element and returns a `CSSStyleDeclaration` object.
   - **Pros**: Accesses styles as they are visually represented in the browser, including those from stylesheets, classes, and user-agent styles.
   - **Cons**: Can be slower than accessing inline styles directly because it may involve more comprehensive calculations to gather the computed styles.

### Benchmark Preparation Code

The benchmark sets up a simple HTML structure with a `div` containing multiple elements. The approach is to iterate 5000 times over the `checkDisplay` function for each method under examination. This function checks if the width, as retrieved by each method, is equal to 0.

### Performance Results

From the benchmark results:

- **style.getPropertyValue** performed the best with approximately **1652 executions per second**.
- **getBoundingClientRect** was the second fastest at around **713 executions per second**.
- **getComputedStyle** had the slowest performance at about **441 executions per second**.

### Other Considerations

- **Use Case Requirements**: The choice of method will depend on the specific use case. If you only need to check inline styles, `style.getPropertyValue` may be optimal. However, if you need to retrieve the visual styles considering stylesheets, `getComputedStyle` is necessary despite its overhead.
  
- **Performance Implications**: In high-frequency scenarios (like animations or rapid layout calculations), the choice might dramatically affect performance. The benchmark indicates that, for rapid checks of styles, `style.getPropertyValue` would be preferable when inline styles are in use.

### Alternatives

- If modifying the DOM or measuring layouts frequently, using utility libraries (like **jQuery** or **Lodash**) can help in handling compatibility and fallbacks across different browsers.
- CSS variables and Contextual CSS JavaScript APIs can also be alternatives to retrieve styles dynamically in cases where runtime computations are required, making certain scenarios less reliant on direct DOM style checks.

In summary, this benchmark provides critical insights into the performance implications of different methods for style retrieval in JavaScript, allowing software engineers to make informed decisions based on the specific context and requirements of their application.

Related benchmarks:

getComputedStyle vs style.getPropertyValue vs. getBoundingClientRect (version: 0)

Comparing performance of: style.getPropertyValue vs getBoundingClientRect vs getComputedStyle

Created: 2 months ago by: Guest

Jump to the latest result

style.getPropertyValue

getBoundingClientRect

getComputedStyle

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):