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++; }

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: 17 days ago)

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

Browser/OS: Chrome 135 on Windows

View result in a separate tab

Test name	Executions per second
style.setProperty	34.7 Ops/sec
style.cssText	30.2 Ops/sec
style	25.7 Ops/sec
attributeStyleMap.set	7.7 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months 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.

Related benchmarks:

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: one year ago by: Guest

Jump to the latest result

style.setProperty

style.cssText

style

attributeStyleMap.set

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):