Benchmark: computedStyleMap vs getComputedStyle (once)

HTML Preparation code:

<div class="foo"></div>

Tests:

getComputedStyle
var i = 1; var el = document.querySelector(".foo"); while (i--) { window.getComputedStyle(el).getPropertyValue('color') }
computedStyleMap
var i = 1; var el = document.querySelector(".foo"); while (i--) { el.computedStyleMap().get('color') }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getComputedStyle
computedStyleMap

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 11 days ago)

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

Browser/OS: Chrome 146 on Windows

View result in a separate tab

Test name	Executions per second
getComputedStyle	742649.3 Ops/sec
computedStyleMap	780964.9 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

LLMs can make mistakes. Check important info.

The benchmark under discussion compares two methods for obtaining the computed styles of a DOM element in JavaScript: `getComputedStyle` and `computedStyleMap`.

### Benchmark Overview

1. **Test Cases**:
   - **getComputedStyle**: This method retrieves a `CSSStyleDeclaration` object representing the specified element's computed style. The benchmark executes this method in a loop to check how many times the style can be retrieved per second.
   - **computedStyleMap**: This is a newer method that returns a `CSSStyleValueMap` object. This object allows access to the properties of an element’s computed styles in a more structured manner and is designed for direct manipulation of styles.

### Pros and Cons

#### 1. `getComputedStyle`
   - **Pros**:
     - Widely supported across all modern browsers, including older versions.
     - Provides a straightforward way to access the computed style as a string.
   - **Cons**:
     - Each call returns a new `CSSStyleDeclaration` object, which may introduce overhead if repeatedly accessed in a performance-sensitive loop.

#### 2. `computedStyleMap`
   - **Pros**:
     - Returns a map-like object that can be manipulated further, which might be beneficial for certain operations that require accessing multiple CSS properties.
     - Can be seen as more modern and potentially easier to work with when dealing with specific value types, such as converting units.
   - **Cons**:
     - Limited support in older browsers (e.g., it is a relatively newer API and may not be available in all environments).
     - Might have a learning curve for developers familiar with the traditional approach.

### Other Considerations

When evaluating these two methods, developers should consider the following:

- **Performance**: `computedStyleMap` shows superior performance in this benchmark, executing more times per second compared to `getComputedStyle`. This suggests that for applications needing to efficiently read computed style values in high-frequency situations (like animation), `computedStyleMap` may be advantageous.
  
- **Browser Support**: Before deciding on which method to implement in production code, it is crucial to check compatibility across target browsers to ensure the method used won't lead to functionality issues in some users' environments.

### Alternatives

1. **Inline Styles**: Instead of querying computed styles, modifying styles directly through inline styles (using `style` attribute) can improve performance, although this does not reflect final computed styles that come from various sources (like CSS files).

2. **CSS Variables (Custom Properties)**: Utilizing CSS variables could mitigate the need for computed styles retrieval when dynamic styling is used, as their values can be read and modified directly.

3. **Mutation Observers**: In scenarios where styles change over time and require tracking, using Mutation Observers can help respond to changes without repeatedly querying for computed styles.

This benchmark offers insights into the performance characteristics of two distinct approaches for styling retrieval in JavaScript, aiding developers in making informed choices based on their application's needs and the environments they target.

Related benchmarks:

computedStyleMap vs getComputedStyle (once) (version: 1)

Comparing performance of: getComputedStyle vs computedStyleMap

Created: one year ago by: Guest

Jump to the latest result

getComputedStyle

computedStyleMap

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):