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

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

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

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.

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

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

style

Object.assign

setAttribute

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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