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

HTML Preparation code:

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

Script Preparation code:

el = document.getElementById("test");
style = el.style
attributeStyleMap = el.attributeStyleMap

Tests:

style.setProperty
style.setProperty("color","red"); style.setProperty("border","1vmin solid red"); style.setProperty("padding","0.5vmin"); style.setProperty("background-color","black"); style.setProperty("height","1vh"); style.setProperty("width","1vw");
style.cssText
style.cssText = "color:red;border:1vmin solid red;padding:0.5vmin;background-color:black;height:1vh;width:1vw;";
style
el.style = "color:red;border:1vmin solid red;padding:0.5vmin;background-color:black;height:1vh;width:1vw;";
attributeStyleMap.set
attributeStyleMap.set("color","red"); attributeStyleMap.set("border","1vmin solid red"); attributeStyleMap.set("padding","0.5vmin"); attributeStyleMap.set("background-color","black"); attributeStyleMap.set("height","1vh"); attributeStyleMap.set("width","1vw");

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 (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

Test name	Executions per second
style.setProperty	1100696.9 Ops/sec
style.cssText	1028477.0 Ops/sec
style	911375.2 Ops/sec
attributeStyleMap.set	358690.8 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark.

**Benchmark Purpose**

The purpose of this benchmark is to compare the performance of four different approaches for setting CSS styles on an HTML element:

1. `style.setProperty()`
2. `style.cssText` property
3. Assigning a string value directly to the `style` object (`el.style = "...";`)
4. Using the `attributeStyleMap.set()` method (introduced in modern browsers)

**Options Comparison**

Here's a brief overview of each option and their pros and cons:

### 1. `style.setProperty()`

* **Pros:** Efficient, fast, and supported by most browsers.
* **Cons:** May not be as intuitive to use, especially for complex styles.

`setProperty()` is the recommended way to set CSS properties in modern browsers. It allows you to specify a property value with a given priority (important) or without (non-important). This approach also provides better performance and is more efficient than using `style.cssText`.

### 2. `style.cssText`

* **Pros:** Simple, straightforward, and widely supported.
* **Cons:** Inefficient, slow, and less secure.

`cssText` is an older property that allows setting CSS styles as a string value. However, this approach has significant drawbacks:

* It can lead to performance issues due to the need for parsing and tokenizing the input string.
* It's not designed for complex styles or long strings, making it prone to security vulnerabilities (e.g., XSS attacks).
* It may not work correctly with CSS features like `calc()` or `var()`.

### 3. Assigning a string value directly to the `style` object (`el.style = "...";`)

* **Pros:** Simple and easy to use.
* **Cons:** Inefficient, slow, and less secure.

Assigning a string value directly to the `style` object can lead to similar issues as using `cssText`. It's not designed for complex styles or long strings and may result in performance problems due to parsing and tokenizing.

### 4. `attributeStyleMap.set()`

* **Pros:** Efficient, fast, and modern (only available in recent browsers).
* **Cons:** Limited support (mainly Chrome and Firefox), and not widely adopted.

`attributeStyleMap.set()` is a relatively new method for setting CSS properties on HTML elements. It provides an efficient way to update styles without modifying the `style` object directly. However, its limited support means it may not be suitable for older browsers or environments that don't support this feature.

**Library and Special Features**

The benchmark uses the following libraries and special features:

* `attributeStyleMap`: a modern browser API introduced in recent versions of Chrome and Firefox.
* CSS calc() function: used in the benchmark to test performance with complex styles.

Related benchmarks:

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

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

Created: 2 years ago by: Registered User

Jump 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):