Benchmark: 6 properties - style.setProperty vs style.cssText vs style vs Object.assign vs setAttribute (w/ nullCheck) 2

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;
let old_style = {
  height: '1vh',
  width: '1vw',
  color: 'red',
  border: '1vmin solid red',
  backgroundColor: 'black',
  padding: '0.5vmin'
};

while (i < 10000) {
  let style = el.getAttribute('style'), nu_style;
  if( style == null || style == '' ) {
	nu_style = JSON.stringify(old_style);
    el.setAttribute('style', nu_style);
  }
  i++;
}

 
let i = 0;let old_style = {  height: '1vh',  width: '1vw',  color: 'red',  border: '1vmin solid red',  backgroundColor: 'black',  padding: '0.5vmin'};​while (i < 10000) {  let style = el.getAttribute('style'), nu_style;  if( style == null || style == '' ) {    nu_style = JSON.stringify(old_style);    el.setAttribute('style', nu_style);  }  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: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6.1 Safari/605.1.15

Browser/OS: Safari 15 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
style.setProperty	33.2 Ops/sec
style.cssText	58.6 Ops/sec
style	43.9 Ops/sec
Object.assign	20.6 Ops/sec
setAttribute	837.2 Ops/sec

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

Let's break down the benchmark and explain what is being tested.

The benchmark is comparing four different ways to set CSS styles on an HTML element:

style.setProperty()
style.cssText
style
Object.assign() with a custom style object
setAttribute (with null check)

Options Compared:

The main options being compared are the methods for setting CSS styles, which include:
- Using the setProperty() method to set individual styles.
- Using the cssText property to set multiple styles in one string.
- Assigning a style object directly to the style property.
- Using the Object.assign() method to copy a custom style object into the element's style property.

Pros and Cons of Each Approach:

setProperty():
- Pros:
  - Can set individual styles more precisely.
  - Allows for better control over the styles (e.g., setting only certain properties).
- Cons:
  - May be slower due to the need for multiple method calls.
  - Can lead to performance issues if too many styles are set using this method.
cssText:
- Pros:
  - Fast and efficient, as it sets all styles in one operation.
  - Easy to use, as only a single string is needed.
- Cons:
  - Can be less precise, as multiple properties must be set together.
  - May lead to performance issues if too many styles are set using this method.
style:
- Pros:
  - Simple and easy to use, as no additional methods are required.
- Cons:
  - Less precise than setProperty() or cssText, as individual properties must be separated.
  - May lead to performance issues if too many styles are set using this method.
Object.assign():
- Pros:
  - More precise, as individual properties can be set individually.
  - Can be useful when working with complex style objects.
- Cons:
  - Slower than cssText or direct assignment to style, due to the need for copying and updating the object.
setAttribute:
- Pros:
  - Fast and efficient, as it sets all styles in one operation.
- Cons:
  - Less precise, as only a single string is allowed for style values.
  - May lead to performance issues if too many styles are set using this method.

Other Considerations:

The benchmark also includes a null check when using setAttribute, which can affect the performance of the test.
The use of vmin and vw units in the styles may impact the results, as these units are relative to the viewport size.
The browser being tested (Safari 15) is specific to this benchmark, so results may not be comparable to other browsers.

Overall, this benchmark provides a comprehensive comparison of different methods for setting CSS styles on an HTML element, highlighting the trade-offs between precision, performance, and ease of use.

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what is being tested.

The benchmark is comparing four different ways to set CSS styles on an HTML element:

1. `style.setProperty()`
2. `style.cssText`
3. `style`
4. `Object.assign()` with a custom style object
5. `setAttribute` (with null check)

**Options Compared:**

* The main options being compared are the methods for setting CSS styles, which include:
	+ Using the `setProperty()` method to set individual styles.
	+ Using the `cssText` property to set multiple styles in one string.
	+ Assigning a style object directly to the `style` property.
	+ Using the `Object.assign()` method to copy a custom style object into the element's `style` property.

**Pros and Cons of Each Approach:**

* **setProperty():**
	+ Pros:
		- Can set individual styles more precisely.
		- Allows for better control over the styles (e.g., setting only certain properties).
	+ Cons:
		- May be slower due to the need for multiple method calls.
		- Can lead to performance issues if too many styles are set using this method.
* **cssText:**
	+ Pros:
		- Fast and efficient, as it sets all styles in one operation.
		- Easy to use, as only a single string is needed.
	+ Cons:
		- Can be less precise, as multiple properties must be set together.
		- May lead to performance issues if too many styles are set using this method.
* **style:**
	+ Pros:
		- Simple and easy to use, as no additional methods are required.
	+ Cons:
		- Less precise than `setProperty()` or `cssText`, as individual properties must be separated.
		- May lead to performance issues if too many styles are set using this method.
* **Object.assign():**
	+ Pros:
		- More precise, as individual properties can be set individually.
		- Can be useful when working with complex style objects.
	+ Cons:
		- Slower than `cssText` or direct assignment to `style`, due to the need for copying and updating the object.
* **setAttribute:**
	+ Pros:
		- Fast and efficient, as it sets all styles in one operation.
	+ Cons:
		- Less precise, as only a single string is allowed for style values.
		- May lead to performance issues if too many styles are set using this method.

**Other Considerations:**

* The benchmark also includes a null check when using `setAttribute`, which can affect the performance of the test.
* The use of `vmin` and `vw` units in the styles may impact the results, as these units are relative to the viewport size.
* The browser being tested (Safari 15) is specific to this benchmark, so results may not be comparable to other browsers.

Related benchmarks:

6 properties - style.setProperty vs style.cssText vs style vs Object.assign vs setAttribute (w/ nullCheck) 2 (version: 0)

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

Created: one year ago by: Guest

Jump to the latest result

style.setProperty

style.cssText