Benchmark: computedStyleMap vs getComputedStyle

HTML Preparation code:

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

Tests:

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

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

computedStyleMap

151/s

getComputedStyle

123/s

Fastest: computedStyleMap (1.2x faster)

View exact numbers

✓ computedStyleMap: 151 ops/sec
• getComputedStyle: 123 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
computedStyleMap

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 145 on Mac OS X 10.15.7

View result in a separate tab

computedStyleMap

191/s

getComputedStyle

173/s

View exact numbers

Test name	Executions per second
✓ computedStyleMap	191 Ops/sec
getComputedStyle	173 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 definition and test cases to understand what's being tested.

**Benchmark Definition**

The website provides a JSON object representing the benchmark, which includes:

* `Name`: The name of the benchmark, "computedStyleMap vs getComputedStyle".
* `Description`: A brief description of the benchmark, but it's empty in this case.
* `Script Preparation Code` and `Html Preparation Code`: These are empty, suggesting that the benchmark doesn't require any specific script or HTML setup.

**Test Cases**

The benchmark has two individual test cases:

1. **getComputedStyle**
	* The benchmark definition is a JavaScript code snippet that:
		+ Selects an HTML element (`<div class="foo">`) using `document.querySelector`.
		+ Enters a loop with 15,000 iterations (using `var i = 15000;`).
		+ Inside the loop, it uses `window.getComputedStyle(el)` to get the computed style of the selected element and retrieves the value of the 'color' property.
2. **computedStyleMap**
	* The benchmark definition is a JavaScript code snippet that:
		+ Selects an HTML element (`<div class="foo">`) using `document.querySelector`.
		+ Enters a loop with 15,000 iterations (using `var i = 15000;`).
		+ Inside the loop, it uses `el.computedStyleMap().get('color')` to retrieve the value of the 'color' property from the computed style map.

**What's being tested**

The benchmark is testing two approaches:

1. **getComputedStyle**: This approach uses the built-in `window.getComputedStyle()` function to get the computed style of an element.
2. **computedStyleMap**: This approach uses the `el.computedStyleMap()` method, which is not a standard property of HTML elements. The implementation of this method is specific to each browser.

**Pros and Cons**

1. **getComputedStyle**
	* Pros:
		+ Widely supported by most browsers.
		+ Efficient, as it only retrieves the relevant style properties.
	* Cons:
		+ May incur additional overhead due to the function call.
2. **computedStyleMap**
	* Pros:
		+ May be faster than `getComputedStyle` due to reduced overhead.
	* Cons:
		+ Limited browser support (specific implementation may vary).
		+ May not work in older browsers.

**Library/Implementation**

The `el.computedStyleMap()` method is likely an implementation-specific feature, possibly part of the Web API or a custom library. The specific library or implementation used by the benchmark is not specified in the provided information.

**Special JS feature/Syntax**

There is no mention of any special JavaScript features or syntax in the benchmark definition.

**Alternatives**

Other alternatives to compare include:

* **CSSOM**: This approach uses the `CSSOM` (Cascading Style Sheets Object Model) API, which provides a more efficient way to manipulate styles.
* **CSS-OM**: This is a similar alternative, using the CSS Object Model.
* **DOM manipulation**: This approach would involve manually updating the element's style properties, which may be slower and less efficient than using `getComputedStyle` or `computedStyleMap`.

Keep in mind that this analysis assumes that the provided benchmark definition and test cases are accurate representations of the actual code being tested.

computedStyleMap vs getComputedStyle (version: 0)

Comparing performance of: `getComputedStyle vs computedStyleMap`

Created: 2 years ago by: Guest

Go to the latest result

getComputedStyle

computedStyleMap

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

computedStyleMap vs getComputedStyle (version: 0)

Comparing performance of: getComputedStyle vs computedStyleMap

Created: 2 years ago by: Guest

Go to the latest result

getComputedStyle

computedStyleMap

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 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 computedStyleMap`