Benchmark: style.setProperty vs style.cssText vs style vs attributeStyleMap.set 3

HTML Preparation code:

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

Script Preparation code:

el = document.getElementById("test");
style = el.style
attributeStyleMap = el.attributeStyleMap

color = 'red'
border = '1vmin solid red'
padding = '.5vmin'
backgroundColor = 'black'
height = '1vh'
width = '1vw'

Tests:

style.setProperty
style.setProperty("color", color); style.setProperty("border", border); style.setProperty("padding", padding); style.setProperty("background-color", backgroundColor); style.setProperty("height", height); style.setProperty("width", width);
style.cssText
style.cssText = `color:${color};border:${border};padding:${padding};background-color:${backgroundColor};height:${height};width:${width};`;
style
el.style = `color:${color};border:${border};padding:${padding};background-color:${backgroundColor};height:${height};width:${width};`;
attributeStyleMap.set
attributeStyleMap.set("color",color); attributeStyleMap.set("border",border); attributeStyleMap.set("padding",padding); attributeStyleMap.set("background-color",backgroundColor); attributeStyleMap.set("height",height); attributeStyleMap.set("width",width);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
style.setProperty
style.cssText
style
attributeStyleMap.set

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 138 on Mac OS X 10.15.7

View result in a separate tab

style.setProperty

1.1M/s

style.cssText

956K/s

style

865K/s

attributeStyleMap.set

350K/s

View exact numbers

Test name	Executions per second
✓ style.setProperty	1,075,446 Ops/sec
style.cssText	955,846 Ops/sec
style	865,053 Ops/sec
attributeStyleMap.set	349,724 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided JSON represents a JavaScript microbenchmark on the performance comparison of different approaches to setting CSS styles in HTML elements.

**What is being tested?**

Four test cases are compared:

1. `style.setProperty`
2. `style.cssText` (using a string template)
3. `el.style` (assigning a string to the style property)
4. `attributeStyleMap.set` (using the `attributeStyleMap` API)

**Options being compared**

Each option is being tested for its execution speed, measured in executions per second.

**Pros and Cons of each approach:**

1. **style.setProperty**: This method is widely supported by browsers and provides a clear separation between CSS declarations and JavaScript code. However, it may incur additional overhead due to the need to parse and execute the CSS rules.
2. **style.cssText**: This method allows for easy string templating, but can be slower due to the need to parse and execute the CSS template. Additionally, this approach is less flexible than `style.setProperty`, as it requires a fixed format for CSS declarations.
3. **el.style**: Assigning a string to the style property can be faster than using `style.setProperty` or `attributeStyleMap.set`, but may incur performance costs due to the need to parse and execute the JavaScript code.
4. **attributeStyleMap.set**: This method provides a more concise and flexible way to set CSS styles, but is less widely supported by browsers (currently only Chrome).

**Library and syntax used**

The test cases use the following libraries and syntax:

* `attributeStyleMap`: A proprietary API provided by Chrome that allows setting CSS styles directly on an HTML element.
* `el.attributeStyleMap`: Accessing the `attributeStyleMap` property of an HTML element.

No special JavaScript features or syntax are being tested in this benchmark.

**Other alternatives**

If you're looking for alternative approaches to setting CSS styles, consider:

1. Using a library like CSS-in-JS (e.g., styled-components) that allows for more flexible and concise styling.
2. Utilizing browser-specific APIs like `style.cssText` or `attributeStyleMap`.
3. Employing CSS pre-processing techniques like Sass or Less to optimize CSS performance.

Keep in mind that the performance differences between these approaches may vary depending on your specific use case, browser, and implementation details.

style.setProperty vs style.cssText vs style vs attributeStyleMap.set 3 (version: 0)

Comparing performance of: `style.setProperty vs style.cssText vs style vs attributeStyleMap.set`

Created: 2 years ago by: Registered User

Go to the latest result

style.setProperty

style.cssText

style

attributeStyleMap.set

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

style.setProperty vs style.cssText vs style vs attributeStyleMap.set 3 (version: 0)

Comparing performance of: style.setProperty vs style.cssText vs style vs attributeStyleMap.set

Created: 2 years ago by: Registered User

Go to the latest result

style.setProperty

style.cssText

style

attributeStyleMap.set

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: `style.setProperty vs style.cssText vs style vs attributeStyleMap.set`