Benchmark: 6 properties - style.setProperty vs style.cssText vs style vs Object.assign vs setAttribute vs assign property

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
style.setProperty
style.cssText
style
Object.assign
setAttribute
Assign property

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:125.0) Gecko/20100101 Firefox/125.0

Browser/OS: Firefox 125 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
style.setProperty	5.3 Ops/sec
style.cssText	15.7 Ops/sec
style	12.8 Ops/sec
Object.assign	4.6 Ops/sec
setAttribute	362.1 Ops/sec
Assign property	5.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark definition and test cases.

**Benchmark Definition**

The benchmark measures the performance of different ways to set CSS styles on an HTML element. The test compares six approaches:

1. `style.setProperty`
2. `style.cssText`
3. `style` (assigning a string value directly)
4. `Object.assign` (using the object assignment method)
5. `setAttribute` (setting the `style` attribute manually)
6. `Assign property` (directly assigning individual style properties)

**What is being tested?**

The benchmark tests the performance of setting CSS styles on an HTML element by iterating over a large number of iterations (10,000). The test measures the time taken to execute each approach.

**Options Compared**

The benchmark compares six approaches:

1. `style.setProperty`: uses the `setProperty` method to set multiple CSS properties in a single call.
2. `style.cssText`: sets all CSS properties using the `cssText` property.
3. `style`: assigns a string value directly to the `style` property, setting all CSS properties at once.
4. `Object.assign`: uses the object assignment method (`Object.assign`) to set multiple CSS properties in a single call.
5. `setAttribute`: sets the `style` attribute manually using the `setAttribute` method.
6. `Assign property`: directly assigns individual style properties (e.g., `el.style.color = "red"`).

**Pros and Cons**

Here's a brief summary of each approach:

1. **style.setProperty**:
	* Pros: efficient, reduces number of calls to DOM, potentially faster execution.
	* Cons: may have limitations for certain use cases (e.g., vendor prefixes).
2. **style.cssText**:
	* Pros: simple, easy to implement, works well for most cases.
	* Cons: can lead to slower performance due to the need to parse and execute multiple CSS statements.
3. **style**:
	* Pros: concise, works well for small sets of properties.
	* Cons: may be less efficient than other approaches, especially for large numbers of properties.
4. **Object.assign**:
	* Pros: efficient, works well for large sets of properties.
	* Cons: requires an object, can lead to slower performance due to the need to parse and execute multiple CSS statements.
5. **setAttribute**:
	* Pros: simple, easy to implement, works well for small sets of properties.
	* Cons: may be less efficient than other approaches, especially for large numbers of properties.
6. **Assign property**:
	* Pros: concise, works well for individual style properties.
	* Cons: may lead to slower performance due to the need to execute multiple assignments.

**Conclusion**

The benchmark results will likely show that `style.setProperty` and `Object.assign` are the most efficient approaches, followed closely by `setAttribute`. However, the actual performance differences between these approaches may vary depending on specific use cases and requirements.

Related benchmarks:

6 properties - style.setProperty vs style.cssText vs style vs Object.assign vs setAttribute vs assign property (version: 0)

Comparing performance of: style.setProperty vs style.cssText vs style vs Object.assign vs setAttribute vs Assign property

Created: 2 years ago by: Guest

Jump to the latest result

style.setProperty

style.cssText

style

Object.assign

setAttribute

Assign property

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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