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>

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

Script Preparation code:

el = document.getElementById("test");

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

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

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

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

 
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

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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: 11 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 5 months ago):

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:

style.setProperty
style.cssText
style (assigning a string value directly)
Object.assign (using the object assignment method)
setAttribute (setting the style attribute manually)
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:

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

Pros and Cons

Here's a brief summary of each approach:

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).
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.
style:
- Pros: concise, works well for small sets of properties.
- Cons: may be less efficient than other approaches, especially for large numbers of properties.
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.
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.
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.

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: 3 years ago by: Guest

Jump to the latest result

style.setProperty

style.cssText