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

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", i/100 + "%"); 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", i/100 + "%");
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:${i/100}%;`; 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:${i/100}%;`;
i++;
}
style replace
let i = 0; while (i < 10000) { el.style = `color:red;border:1vmin solid red;padding:0.5vmin;background-color:black;height:1vh;width:${i/100}%;`; i++; }
let i = 0;

while (i < 10000) {
el.style = `color:red;border:1vmin solid red;padding:0.5vmin;background-color:black;height:1vh;width:${i/100}%;`;
i++;
}

Object.assign

let i = 0;

while (i < 10000) {
  Object.assign(el.style, {
  height: '1vh',
  width: i/100 + '%',
  color: 'red',
  border: '1vmin solid red',
  backgroundColor: 'black',
  padding: '0.5vmin'
});
  i++;
}

 
let i = 0;​while (i < 10000) {  Object.assign(el.style, {  height: '1vh',  width: i/100 + '%',  color: 'red',  border: '1vmin solid red',  backgroundColor: 'black',  padding: '0.5vmin'});  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:${i/100}%;`); 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:${i/100}%;`);
i++;
}

style update

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 = i/100 + "%";
  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 = i/100 + "%";  i++;}

style.cssText update
let i = 0; while (i < 10000) { el.style.cssText += ';' + `color:red;border:1vmin solid red;padding:0.5vmin;background-color:black;height:1vh;width:${i/100}%;`; 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:${i/100}%;`;
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 replace
Object.assign
setAttribute
style update
style.cssText update

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 116 on Windows

View result in a separate tab

Test name	Executions per second
style.setProperty	27.9 Ops/sec
style.cssText	36.8 Ops/sec
style replace	32.8 Ops/sec
Object.assign	31.2 Ops/sec
setAttribute	33.0 Ops/sec
style update	25.9 Ops/sec
style.cssText update	12.7 Ops/sec

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

Let's dive into the world of JavaScript benchmarks.

What is being tested?

MeasureThat.net is testing four different ways to set CSS properties on an HTML element: style.setProperty, style.cssText, Object.assign (on the style object), and setAttribute. The test cases aim to compare the performance, syntax complexity, and potential issues with each approach.

Options compared:

style.setProperty: This method sets multiple CSS properties at once using a string.
style.cssText: This method sets a single CSS property as a string.
Object.assign (on style object): This method merges an object with the existing style object, allowing for setting multiple properties in one step.
setAttribute: This method sets a single CSS attribute on the element using a string.

Pros and Cons:

style.setProperty:
- Pros: Convenient, efficient, and allows for setting multiple properties at once.
- Cons: Only supports property-value pairs (e.g., color and red), not individual property names (e.g., color alone).
- Potential issue: If the property name is very long or contains special characters, it might cause issues with parsing.
style.cssText:
- Pros: Simple and flexible, supports setting multiple properties in a single string.
- Cons: Can be harder to read and maintain due to the need to concatenate strings for each property-value pair.
Object.assign (on style object):
- Pros: Allows for setting multiple properties at once, with minimal syntax changes from style.setProperty.
- Cons: Requires creating an object with property names as keys, which might be overkill for simple cases.
setAttribute:
- Pros: Simple and straightforward, suitable for setting single CSS attributes.
- Cons: Limited to setting individual attributes (e.g., color instead of color: red;) and may not support multiple properties at once.

Performance implications:

In general, style.setProperty is likely to be the fastest option due to its optimized parsing and execution by modern browsers. However, the actual performance difference between these options might be negligible unless you're working with extremely large stylesheets or high-performance applications.

Conclusion:

The choice of method depends on your specific use case, personal preference, and project requirements. If you need to set multiple properties at once and prioritize ease of use, style.setProperty is a solid choice. For simpler cases where individual property names are sufficient, style.cssText might be the better option. Object.assign (on style object) and setAttribute can be useful in specific situations but may require more setup or have limitations.

Keep in mind that these results are based on MeasureThat.net's test data, which might not reflect your specific use case or environment. If you're concerned about performance or have specific questions, consider benchmarking your own code or consulting with a web development expert.

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript benchmarks.

**What is being tested?**

MeasureThat.net is testing four different ways to set CSS properties on an HTML element: `style.setProperty`, `style.cssText`, `Object.assign` (on the style object), and `setAttribute`. The test cases aim to compare the performance, syntax complexity, and potential issues with each approach.

**Options compared:**

1. **style.setProperty**: This method sets multiple CSS properties at once using a string.
2. **style.cssText**: This method sets a single CSS property as a string.
3. **Object.assign** (on style object): This method merges an object with the existing style object, allowing for setting multiple properties in one step.
4. **setAttribute**: This method sets a single CSS attribute on the element using a string.

**Pros and Cons:**

1. **style.setProperty**:
	* Pros: Convenient, efficient, and allows for setting multiple properties at once.
	* Cons: Only supports property-value pairs (e.g., `color` and `red`), not individual property names (e.g., `color` alone).
	* Potential issue: If the property name is very long or contains special characters, it might cause issues with parsing.
2. **style.cssText**:
	* Pros: Simple and flexible, supports setting multiple properties in a single string.
	* Cons: Can be harder to read and maintain due to the need to concatenate strings for each property-value pair.
3. **Object.assign** (on style object):
	* Pros: Allows for setting multiple properties at once, with minimal syntax changes from `style.setProperty`.
	* Cons: Requires creating an object with property names as keys, which might be overkill for simple cases.
4. **setAttribute**:
	* Pros: Simple and straightforward, suitable for setting single CSS attributes.
	* Cons: Limited to setting individual attributes (e.g., `color` instead of `color: red;`) and may not support multiple properties at once.

**Performance implications:**

In general, `style.setProperty` is likely to be the fastest option due to its optimized parsing and execution by modern browsers. However, the actual performance difference between these options might be negligible unless you're working with extremely large stylesheets or high-performance applications.

**Conclusion:**

The choice of method depends on your specific use case, personal preference, and project requirements. If you need to set multiple properties at once and prioritize ease of use, `style.setProperty` is a solid choice. For simpler cases where individual property names are sufficient, `style.cssText` might be the better option. Object.assign (on style object) and `setAttribute` can be useful in specific situations but may require more setup or have limitations.

Related benchmarks:

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

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

Created: 3 years ago by: Guest

Jump to the latest result

style.setProperty

style.cssText

style replace