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

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 replace
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++; }
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 = "1vw"; i++; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
style.setProperty
style.cssText
style replace
Object.assign
setAttribute
style update

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its test cases.

**Benchmark Overview**

The benchmark, named "7 properties - style.setProperty vs style.cssText vs style vs Object.assign vs setAttribute," compares the performance of different methods for setting CSS styles on an HTML element. The goal is to identify which method is the fastest and most efficient.

**Test Cases**

There are five test cases:

1. **style.setProperty**: This method sets a single property value using the `setProperty` function, followed by a loop that applies multiple properties with varying units (e.g., `%`, `em`, etc.) to the element.
2. **style.cssText**: This method sets all CSS styles as a single string in the `cssText` property of the element's style attribute. The test case is similar to the first one, but uses this approach instead.
3. **style replace**: This method is not clearly explained in the benchmark definition, so I'll assume it means setting multiple properties on the element using the dot notation (e.g., `el.style.color`).
4. **Object.assign**: This method sets all CSS styles by passing an object with property-value pairs to the `assign` function and applying it to the element's style attribute.
5. **setAttribute**: This method sets a single property value in the `style` attribute of the element, followed by a loop that applies multiple properties to the element.

**Libraries and Special Features**

None of the test cases use any external libraries or special features like ES modules, async/await, or Web Workers.

**Performance Comparison**

The benchmark results show that:

* **setAttribute** is the fastest method for setting individual property values.
* **style.setProperty** is faster than **style.cssText**, likely due to its ability to set multiple properties in a single call with varying units.
* **Object.assign** and **style replace** are slower, possibly because they require creating an object or modifying the element's style attribute, which can be more expensive operations.

**Alternatives**

If you want to explore other approaches for setting CSS styles on an HTML element, consider these alternatives:

* Using CSS classes with JavaScript: Instead of setting individual properties, use CSS classes and apply them dynamically using JavaScript. This approach can be faster than setting each property individually.
* Utilizing the `css` API: The Web APIs provide a `css` interface for styling elements. You can use this API to update styles efficiently.

Keep in mind that these alternatives may have different performance characteristics or require additional setup and syntax changes.

In summary, the benchmark results suggest that **setAttribute** is a good choice when you need to set individual property values quickly, while **style.setProperty** and **style.cssText** might be better suited for situations where multiple properties need to be applied with varying units.

Latest run results:

Run details: (Test run date: 5 months ago)

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

Browser/OS: Safari 17 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
style.setProperty	7.9 Ops/sec
style.cssText	16.9 Ops/sec
style replace	15.5 Ops/sec
Object.assign	9.9 Ops/sec
setAttribute	330.4 Ops/sec
style update	8.7 Ops/sec

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

Created: 2 years ago by: Guest

Jump to the latest result

style.setProperty

style.cssText

style replace

Object.assign

setAttribute

style update

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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