Benchmark: 6 properties - style.setProperty vs attributeStyleMap.set vs attributeStyleMap.set with parsed values

HTML Preparation code:

<div id="test"></div>

Script Preparation code:

el = document.getElementById("test");
color = CSSStyleValue.parse("color","red");
border = CSSStyleValue.parse("border","1vmin solid red");
padding = CSSStyleValue.parse("padding","0.5vmin");
backgroundColor = CSSStyleValue.parse("background-color","black");
height = CSSStyleValue.parse("height","1vh");
width = CSSStyleValue.parse("width","1vw");

Tests:

style.setProperty
let i = 0; while (i < 10000) { el.style.setProperty("color","red"); el.style.setProperty("border","1vmin solid red"); el.style.setProperty("padding","0.5vmin"); el.style.setProperty("background-color","black"); el.style.setProperty("height","1vh"); el.style.setProperty("width","1vw"); i++; }
attributeStyleMap.set
let i = 0; while (i < 10000) { el.attributeStyleMap.set("color","red"); el.attributeStyleMap.set("border","1vmin solid red"); el.attributeStyleMap.set("padding","0.5vmin"); el.attributeStyleMap.set("background-color","black"); el.attributeStyleMap.set("height","1vh"); el.attributeStyleMap.set("width","1vw"); i++; }
attributeStyleMap.set with parsed values
let i = 0; while (i < 10000) { el.attributeStyleMap.set("color", color); el.attributeStyleMap.set("border", border); el.attributeStyleMap.set("padding", padding); el.attributeStyleMap.set("background-color", backgroundColor); el.attributeStyleMap.set("height", height); el.attributeStyleMap.set("width", width); i++; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
style.setProperty
attributeStyleMap.set
attributeStyleMap.set with parsed values

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 124 on Windows

View result in a separate tab

Test name	Executions per second
style.setProperty	14.9 Ops/sec
attributeStyleMap.set	4.3 Ops/sec
attributeStyleMap.set with parsed values	6.8 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview**

The provided JSON represents a benchmark test created on the MeasureThat.net platform, which compares the performance of three different approaches for setting CSS styles in an HTML element: `style.setProperty`, `attributeStyleMap.set`, and `attributeStyleMap.set with parsed values`. The test aims to measure the execution speed of each approach.

**What is tested**

The benchmark tests are designed to compare the performance of three different ways to set CSS styles on an HTML element:

1. **`style.setProperty`**: This method sets a property on the element's `style` attribute using the `setProperty` method.
2. **`attributeStyleMap.set`**: This method sets a property on the element's `attributeStyleMap` object, which is a newer API introduced in CSSOM (CSS Object Model) version 3.
3. **`attributeStyleMap.set with parsed values`**: This variant of the previous approach uses the `parse` method to convert string values into CSS values before setting them.

**Options compared**

The benchmark tests compare the performance of these three approaches:

* `style.setProperty`
* `attributeStyleMap.set`
* `attributeStyleMap.set with parsed values`

**Pros and cons of each approach**

1. **`style.setProperty`**:
	* Pros: Widely supported, easy to use.
	* Cons: Can lead to slower performance due to the need to parse CSS values on each property set.
2. **`attributeStyleMap.set`**:
	* Pros: Faster than `style.setProperty`, as it avoids parsing CSS values on each property set.
	* Cons: Not widely supported, may require additional setup for some browsers.
3. **`attributeStyleMap.set with parsed values`**:
	* Pros: Combines the benefits of both approaches by using `parse` to convert string values into CSS values.
	* Cons: Requires a compatible browser and may have performance overhead due to parsing.

**Library and syntax**

In this benchmark, the `CSSStyleValue.parse()` method is used to parse string values into CSS values. This method is part of the Web APIs (Web Platform Incubator) standard.

**Special JS feature or syntax**

The `attributeStyleMap.set()` method and its variants use a newer API introduced in CSSOM version 3. This API allows for more efficient setting of CSS properties on elements.

**Other alternatives**

If you need to set CSS styles on an element, consider using the `style` attribute directly (e.g., `el.style.color = 'red';`). However, this approach may have performance drawbacks and is not as flexible as using `attributeStyleMap.set()` or `style.setProperty()`.

Related benchmarks:

6 properties - style.setProperty vs attributeStyleMap.set vs attributeStyleMap.set with parsed values (version: 0)

Comparing performance of: style.setProperty vs attributeStyleMap.set vs attributeStyleMap.set with parsed values

Created: 4 years ago by: Guest

Jump to the latest result

style.setProperty

attributeStyleMap.set

attributeStyleMap.set with parsed values

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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