Benchmark: 6 properties - style.setProperty vs style.cssText vs style vs Object.assign vs Object.entries with style.cssText 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
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++; }
Object.entries with style.cssText
let style = { height: '1vh', width: '1vw', color: 'red', border: '1vmin solid red', backgroundColor: 'black', padding: '0.5vmin' }; let i = 0; while (i < 10000) { let cssText = Object.entries(style).reduce((acc, [key, value]) => { acc += `${key}: ${value};` return acc; }, ''); el.style.cssText = cssText; 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
Object.entries with style.cssText

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

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

Browser/OS: Chrome 103 on Windows

View result in a separate tab

Test name	Executions per second
style.setProperty	11.0 Ops/sec
style.cssText	20.5 Ops/sec
style	17.2 Ops/sec
Object.assign	9.5 Ops/sec
setAttribute	19.0 Ops/sec
Object.entries with style.cssText	13.6 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the explanation into smaller parts to make it easier to understand.

**Benchmark Overview**

The benchmark measures the performance of different ways to set CSS styles on an HTML element in JavaScript. The test cases compare six approaches:

1. `style.setProperty`
2. `style.cssText`
3. `style`
4. `Object.assign`
5. `setAttribute`
6. `Object.entries with style.cssText`

**Approach 1: style.setProperty**

`style.setProperty` is a DOM method that allows you to set CSS properties on an element without having to create a new stylesheet or manipulate the existing one. It takes two arguments: the property name and its value.

Pros:

* Efficient, as it only updates the specified property.
* Can be used for more complex style modifications.

Cons:

* May require additional DOM manipulation (e.g., creating new stylesheets) if not used carefully.
* Can lead to slower performance in cases where multiple properties are set simultaneously.

**Approach 2: style.cssText**

`style.cssText` is a property of the `style` object that allows you to set a single CSS text value. You can use it by setting a string with multiple styles separated by semicolons (e.g., `"color:red;border:1vmin solid red;"`).

Pros:

* Easy to implement and understand.
* Can be faster than other approaches due to its simplicity.

Cons:

* May lead to slower performance if the style string is too large or complex.
* Not recommended for setting multiple styles at once, as it can result in inefficient DOM manipulation.

**Approach 3: style**

Setting `style` directly on an element is another way to apply CSS styles. You can pass a string with multiple styles separated by semicolons (e.g., `"color:red;border:1vmin solid red;"`).

Pros:

* Similar to `style.cssText`, easy to implement and understand.

Cons:

* May lead to slower performance if the style string is too large or complex.
* Not recommended for setting multiple styles at once, as it can result in inefficient DOM manipulation.

**Approach 4: Object.assign**

`Object.assign` is a method that allows you to copy properties from one object to another. In this case, it's used to set the `style` property of an element by passing an object with CSS styles.

Pros:

* Can be efficient for setting multiple styles at once.
* Easy to understand and implement.

Cons:

* May lead to slower performance if the style object is too large or complex.
* Requires additional DOM manipulation (e.g., creating a new stylesheet) if not used carefully.

**Approach 5: attributeSet**

`setAttribute` is a method that allows you to set an attribute on an element. In this case, it's used to set CSS styles by passing the property name and value as arguments.

Pros:

* Can be efficient for setting multiple styles at once.
* Easy to understand and implement.

Cons:

* May lead to slower performance if the style string is too large or complex.
* Not recommended for setting multiple styles at once, as it can result in inefficient DOM manipulation.

**Approach 6: Object.entries with style.cssText**

This approach combines `Object.entries` (which returns an array of key-value pairs from an object) with `style.cssText`. The resulting string is then applied to the element's `style` property using `style.cssText`.

Pros:

* Can be efficient for setting multiple styles at once.
* Easy to understand and implement.

Cons:

* May lead to slower performance if the style string is too large or complex.
* Not recommended for setting multiple styles at once, as it can result in inefficient DOM manipulation.

**Benchmark Results**

The benchmark results show that `style.cssText` consistently performs better than the other approaches, likely due to its simplicity and minimal DOM overhead. However, the performance differences between the approaches are relatively small, indicating that most of the difference lies in the implementation details rather than the fundamental approach itself.

Keep in mind that this is a simplified explanation, and there may be additional factors that influence the performance of each approach depending on your specific use case.

Related benchmarks:

6 properties - style.setProperty vs style.cssText vs style vs Object.assign vs Object.entries with style.cssText vs setAttribute (version: 0)

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

Created: 2 years ago by: Guest

Jump to the latest result

style.setProperty

style.cssText

style

Object.assign

setAttribute

Object.entries with style.cssText

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