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

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++; }
attributeStyleMap.set
let i = 0; while (i < 10000) { el.attributeStyleMap.set("color","red"); el.attributeStyleMap.set("border","1vmin solid red"); el.attributeStyleMap.set("padding","0.5vmin"); el.attributeStyleMap.set("background-color","black"); el.attributeStyleMap.set("height","1vh"); el.attributeStyleMap.set("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
attributeStyleMap.set

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/112.0.0.0 Safari/537.36 Edg/112.0.1722.68

Browser/OS: Chrome 112 on Windows

View result in a separate tab

Test name	Executions per second
style.setProperty	14.0 Ops/sec
style.cssText	12.5 Ops/sec
style	11.4 Ops/sec
Object.assign	12.8 Ops/sec
setAttribute	165.2 Ops/sec
attributeStyleMap.set	4.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the JavaScript microbenchmarking provided by MeasureThat.net.

**Benchmark Overview**

The benchmark compares six different approaches to setting CSS styles on an HTML element:

1. `style.setProperty()`
2. `style.cssText`
3. `style`
4. `Object.assign()` with the style object
5. `setAttribute()` with the style attribute
6. `attributeStyleMap.set()` with the attribute style map

**Comparison of Approaches**

Here's a brief overview of each approach, along with their pros and cons:

1. **`style.setProperty()`**: This method sets CSS properties on an element. It's a built-in method that allows for more flexibility in setting styles.
	* Pros: More flexible, efficient, and widely supported.
	* Cons: May not be as straightforward to use, especially for beginners.
2. **`style.cssText`**: This property sets the entire style string for an element. It's a simple way to set styles, but it can be less efficient than other methods.
	* Pros: Easy to use, simple syntax.
	* Cons: Less flexible, may not support all CSS properties or values.
3. **`style`**: This is a shorthand property that sets multiple styles in a single string. It's similar to `style.cssText`, but more limited in its capabilities.
	* Pros: Simple syntax, easy to use.
	* Cons: Limited flexibility, may not support all CSS properties or values.
4. **`Object.assign()` with style object**: This method uses the `Object.assign()` function to copy properties from one object (in this case, the style object) to another element's style property.
	* Pros: Flexible, easy to use, and widely supported.
	* Cons: May not be as efficient as other methods, especially for large styles objects.
5. **`setAttribute()` with style attribute**: This method sets the `style` attribute of an HTML element using the `setAttribute()` function.
	* Pros: Simple syntax, easy to use.
	* Cons: Less flexible and less widely supported than other methods.
6. **`attributeStyleMap.set()` with attribute style map**: This method uses a custom attribute called `data-styles` to store CSS styles on an element.
	* Pros: Flexible, easy to use, and unique approach.
	* Cons: Less widely supported and may require additional configuration.

**Benchmark Results**

The benchmark results show the execution speed of each approach for different browsers (Chrome 112) on a desktop platform. The results suggest that:

* `style.setProperty()` is generally the fastest approach, followed closely by `Object.assign()` with the style object.
* `style.cssText` and `style` are slower due to their simplicity and limited capabilities.
* `setAttribute()` with the style attribute is significantly slower than other methods.
* `attributeStyleMap.set()` with the attribute style map is the slowest approach, likely due to its custom implementation.

In conclusion, while all approaches have their pros and cons, `style.setProperty()` appears to be the most efficient and flexible method for setting CSS styles on an HTML element. However, the best approach ultimately depends on your specific use case, performance requirements, and personal preference.

Related benchmarks:

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

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

Created: one year ago by: Guest

Jump to the latest result

style.setProperty

style.cssText

style

Object.assign

setAttribute

attributeStyleMap.set

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):