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

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

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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

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

Browser/OS: Chrome 103 on Windows 7

View result in a separate tab

Test name	Executions per second
style.setProperty	13.7 Ops/sec
style.cssText	23.7 Ops/sec
style	20.1 Ops/sec
Object.assign	13.7 Ops/sec
setAttribute	22.1 Ops/sec

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

Benchmark Overview

The provided benchmark measures the performance of six different approaches to setting CSS styles on an HTML element:

style.setProperty
style.cssText
style (direct assignment)
Object.assign (assigning a style object)
setAttribute (setting the style attribute)

The benchmark uses JavaScript, specifically vanilla JavaScript, and is run on a Windows 7 desktop with Chrome 103.

Approaches Comparison

Here's a brief overview of each approach, their pros and cons, and other considerations:

style.setProperty
- Pros: More efficient, as it updates individual properties instead of setting the entire style sheet.
- Cons: Requires multiple calls for each property, which can be slower for large numbers of styles.
style.cssText
- Pros: Simple and straightforward, setting all styles at once.
- Cons: Can be less efficient than setProperty due to parsing and parsing limits in CSS.
style (direct assignment)
- Pros: Simple and straightforward, setting all styles at once.
- Cons: Similar to cssText, can be less efficient due to parsing limitations.
Object.assign
- Pros: More flexible, allowing for dynamic style objects.
- Cons: Can be slower due to object creation and assignment overhead.
setAttribute (setting the style attribute)
- Pros: Simple and straightforward, setting all styles at once.
- Cons: May not work correctly in older browsers or with complex styles.

Library/Function Considerations

The Object.assign() method is a built-in JavaScript function used to copy properties from one object to another. It's widely supported and has good performance in modern browsers.

Special JS Features/Syntax

There are no specific features or syntax mentioned in the benchmark code that require special attention.

Other Alternatives

If you're interested in exploring alternative approaches, here are a few options:

CSSOM (CSS Object Model): A set of APIs for manipulating CSS styles on an element. While not directly related to the benchmark, understanding CSSOM can provide insights into efficient style manipulation.
Custom properties: Introduced in CSS3, custom properties allow you to define and use variables in your stylesheets. This approach might offer performance benefits but is not relevant to this specific benchmark.

Keep in mind that these alternatives are not directly related to the six approaches tested in the benchmark.

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark measures the performance of six different approaches to setting CSS styles on an HTML element:

1. `style.setProperty`
2. `style.cssText`
3. `style` (direct assignment)
4. `Object.assign` (assigning a style object)
5. `setAttribute` (setting the `style` attribute)

The benchmark uses JavaScript, specifically vanilla JavaScript, and is run on a Windows 7 desktop with Chrome 103.

**Approaches Comparison**

Here's a brief overview of each approach, their pros and cons, and other considerations:

1. **style.setProperty**
	* Pros: More efficient, as it updates individual properties instead of setting the entire style sheet.
	* Cons: Requires multiple calls for each property, which can be slower for large numbers of styles.
2. **style.cssText**
	* Pros: Simple and straightforward, setting all styles at once.
	* Cons: Can be less efficient than `setProperty` due to parsing and parsing limits in CSS.
3. **style** (direct assignment)
	* Pros: Simple and straightforward, setting all styles at once.
	* Cons: Similar to `cssText`, can be less efficient due to parsing limitations.
4. **Object.assign**
	* Pros: More flexible, allowing for dynamic style objects.
	* Cons: Can be slower due to object creation and assignment overhead.
5. **setAttribute** (setting the `style` attribute)
	* Pros: Simple and straightforward, setting all styles at once.
	* Cons: May not work correctly in older browsers or with complex styles.

**Library/Function Considerations**

* The `Object.assign()` method is a built-in JavaScript function used to copy properties from one object to another. It's widely supported and has good performance in modern browsers.

**Special JS Features/Syntax**

There are no specific features or syntax mentioned in the benchmark code that require special attention.

**Other Alternatives**

If you're interested in exploring alternative approaches, here are a few options:

* **CSSOM** (CSS Object Model): A set of APIs for manipulating CSS styles on an element. While not directly related to the benchmark, understanding CSSOM can provide insights into efficient style manipulation.
* **Custom properties**: Introduced in CSS3, custom properties allow you to define and use variables in your stylesheets. This approach might offer performance benefits but is not relevant to this specific benchmark.

Keep in mind that these alternatives are not directly related to the six approaches tested in the benchmark.

Related benchmarks:

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

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

Created: 3 years ago by: Registered User

Jump to the latest result

style.setProperty

style.cssText