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

HTML Preparation code:

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

Script Preparation code:

el = document.getElementById("test");

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++; }
style.cssText
let i = 0; while (i < 10000) { el.style.cssText = "color:red;border:1vmin solid red;padding:0.5vmin;background-color:black;height:1vh;width:1vw;"; i++; }
style
let i = 0; while (i < 10000) { el.style = "color:red;border:1vmin solid red;padding:0.5vmin;background-color:black;height:1vh;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++; }

Historical Performance Data aggregated from 17 community runs

Desktop Results:

Chrome 17 runs

style.cssText

37/s

style.setProperty

35/s

style

33/s

attributeStyleMap.set

12/s

Fastest: style.cssText (3.1x faster)

View exact numbers

✓ style.cssText: 37 ops/sec
• style.setProperty: 35 ops/sec
• style: 33 ops/sec
• attributeStyleMap.set: 12 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
style.setProperty
style.cssText
style
attributeStyleMap.set

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Opera 122 on Windows

View result in a separate tab

style.cssText

42/s

style.setProperty

38/s

style

37/s

attributeStyleMap.set

12/s

View exact numbers

Test name	Executions per second
✓ style.cssText	42 Ops/sec
style.setProperty	38 Ops/sec
style	37 Ops/sec
attributeStyleMap.set	12 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 and explain what is being tested.

The benchmark compares four different approaches to set CSS styles on an HTML element:

1. `style.setProperty`: This method sets a property value for a style declaration using the syntax `style.setProperty('name', 'value')`. It allows you to specify both the name of the property and its associated value, separated by a double quote.
2. `style.cssText`: This property allows you to set multiple CSS styles in a single string, separated by semicolons. The format is `"color:red;border:1vmin solid red;padding:0.5vmin;background-color:black;height:1vh;width:1vw;"`.
3. `style`: This method sets the style declaration for an element using a string, similar to `style.cssText`. However, it does not support multiple styles in a single string.
4. `attributeStyleMap.set`: This method allows you to set CSS properties on an element as attributes on the DOM node itself, rather than through the `style` property. The format is `"color":"red"`, `"border":"1vmin solid red"`, etc.

Now, let's discuss the pros and cons of each approach:

**Pros:**

* `style.setProperty`: This method provides more flexibility when setting multiple styles for an element, as it allows you to separate style names from values.
* `attributeStyleMap.set`: This method can be faster if the browser does not need to parse or execute JavaScript code for the given styles.

Cons:

* `style.setProperty` may require more code and is less flexible than other methods when dealing with multiple styles.
* `attributeStyleMap.set` requires setting individual properties as attributes on the DOM node, which might lead to issues if you don't have control over the HTML source code or need to dynamically change the style.

**Pros:**

* `style.cssText`: This method is easy to use and concise, especially when dealing with a single set of styles.
* `style`: Similar to `style.cssText`, but less flexible due to its limited support for multiple styles in a single string.

Cons:

* Both methods have limitations when it comes to setting multiple styles or accessing properties dynamically.

**Other considerations:**

* When using `attributeStyleMap.set`, you need to be aware that the browser may not always parse these attributes as CSS, especially if they are dynamically generated.
* In modern browsers, all three approaches (except for `style` and `attributeStyleMap.set`) support shorthand properties like `border` or `background-color`. These can simplify the code but require careful consideration when setting multiple values.

**Additional notes on library usage:**

None of the methods in this benchmark rely on a specific JavaScript library. However, it's essential to note that these methods may be subject to variations depending on the browser and its implementation of the respective CSS features.

In terms of special JS features or syntax:

This benchmark does not use any special JavaScript features, other than the standard ECMAScript syntax used for defining functions, variables, and control flow statements. The code should be executable in most modern environments without requiring additional setup or dependencies.

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

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

Created: 3 years ago by: Guest

Go to the latest result

style.setProperty

style.cssText

style

attributeStyleMap.set

Historical Performance Data aggregated from 17 community runs

Desktop Results:

Chrome 17 runs

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 (version: 0)

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

Created: 3 years ago by: Guest

Go to the latest result

style.setProperty

style.cssText

style

attributeStyleMap.set

Historical Performance Data aggregated from 17 community runs

Desktop Results:

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