Benchmark: 6 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
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 26 days ago):

LLMs can make mistakes. Check important info.

Let's dive into the benchmark and explore what's being tested.

**Benchmark Overview**

The benchmark is designed to compare the performance of six different ways to set CSS styles on an HTML element:

1. `style.setProperty`
2. `style.cssText`
3. `style`
4. `Object.assign` with a style object
5. `setAttribute` with a style string

Each test case uses a similar setup: a container element (`el`) is created, and then a loop of 10,000 iterations sets the styles using one of the six methods.

**Options Compared**

Here's a brief overview of each option:

1. **style.setProperty**: This method sets individual CSS properties (e.g., `color`, `border`, etc.) separately. It's considered more efficient because it only updates the specific property being changed, whereas other methods update all styles at once.
2. **style.cssText**: This method sets a single string that contains all the styles for an element. This approach is less efficient than others because it requires parsing and applying the entire style string in one step.
3. **style**: Similar to `style.cssText`, but without the string syntax. It still updates all styles at once, making it less efficient.
4. **Object.assign** with a style object: This method uses JavaScript's built-in `Object.assign` function to update an element's style object. While this approach is more efficient than updating individual properties, it requires creating and manipulating objects, which can be slower than direct property updates.
5. **setAttribute** with a style string: This method sets the `style` attribute of an element using a string that contains all the styles. Similar to `style.cssText`, but without the need for parsing; however, this approach is less efficient because it requires updating the entire style string.

**Pros and Cons**

Here's a brief summary of each option:

* **style.setProperty**: Pros: efficient for individual property updates; Cons: may incur overhead due to separate property updates.
* **style.cssText**: Pros: simple, easy to use; Cons: less efficient due to parsing and applying the entire style string.
* **style**: Similar pros and cons as `style.cssText`.
* **Object.assign** with a style object: Pros: efficient for updating an element's style object; Cons: requires creating and manipulating objects.
* **setAttribute** with a style string: Pros: simple, easy to use; Cons: less efficient due to parsing the entire style string.

**Other Considerations**

When comparing these options, it's essential to consider factors like:

* Browser support: Each option may have different levels of support across browsers.
* Performance overhead: Some methods may incur additional overhead due to parsing, string manipulation, or object creation.
* Code readability and maintainability: Simple and straightforward methods like `style.setProperty` are often preferred for their ease of use.

**Alternatives**

If you're interested in exploring alternative approaches, consider:

* Using CSS-in-JS solutions like styled-components or emotion, which provide a more declarative way to manage styles.
* Leveraging modern browser features like the `CSSStyleDeclaration` API or the `style.set()` method, which offer improved performance and flexibility.

Keep in mind that the results of this benchmark might not be representative for all use cases. The choice of method ultimately depends on your specific requirements, performance constraints, and coding style preferences.

Latest run results:

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

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

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
style.setProperty	19.0 Ops/sec
style.cssText	24.5 Ops/sec
style	21.1 Ops/sec
Object.assign	21.2 Ops/sec
setAttribute	262.1 Ops/sec

Related benchmarks:

6 properties - style.setProperty vs style.cssText vs style vs Object.assign vs setAttribute (version: 2)

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 26 days ago):