Benchmark: 6 properties - style.setProperty vs style.cssText vs style vs Object.assign vs setAttribute yeeeeee pt 2

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("transition", "transform 0s;") el.style.setProperty("transform","translate3d(0,' + 35 +'px,0);"); i++; }
style.cssText
let i = 0; while (i < 10000) { el.style.cssText = 'transform: translate3d(0,' + 35 + 'px,0); transition: transform 0s;'; i++; }
style
let i = 0; while (i < 10000) { el.style = 'transform: translate3d(0,' + 35 + 'px,0); transition: transform 0s;'; i++; }
Object.assign
let style = { transition: "transform 0s;", transform: "translate3d(0,' + 35 +'px,0);" }; let i = 0; while (i < 10000) { Object.assign(el.style, style); i++; }
setAttribute
let i = 0; while (i < 10000) { el.setAttribute('style',"transform: 50s; transition: transform 333ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;"); 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

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36

Browser/OS: Chrome 121 on Linux

View result in a separate tab

Test name	Executions per second
style.setProperty	44.6 Ops/sec
style.cssText	39.5 Ops/sec
style	33.2 Ops/sec
Object.assign	41.3 Ops/sec
setAttribute	132.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested, compared options, pros and cons, and other considerations.

**Benchmark Overview**

The benchmark measures the performance of six different approaches to setting CSS styles on an HTML element:

1. `style.setProperty`
2. `style.cssText`
3. `style`
4. `Object.assign` (to style)
5. `setAttribute`

Each approach has its own strengths and weaknesses, which we'll discuss below.

**Options Comparison**

Here's a brief overview of each option:

### 1. `style.setProperty`

* **Pros**: This is the recommended way to set CSS styles in modern JavaScript. It's a standardized method that works across browsers.
* **Cons**: Can be slower than other methods due to the need to parse and execute the style string.

### 2. `style.cssText`

* **Pros**: Simple and easy to use, as it allows setting multiple styles on a single line.
* **Cons**: Not recommended for production code, as it's a legacy method that may break or behave differently in older browsers. Also, it can be slower than other methods.

### 3. `style`

* **Pros**: Similar to `style.setProperty`, but with the added benefit of being able to set multiple styles on a single object.
* **Cons**: May not work as expected in older browsers, and its performance is similar to `style.setProperty`.

### 4. `Object.assign` (to style)

* **Pros**: This method allows setting multiple styles at once, which can improve performance by reducing the number of DOM mutations.
* **Cons**: May require more memory allocation, depending on the size of the style object.

### 5. `setAttribute`

* **Pros**: Simple and fast, as it sets a single attribute without parsing or executing any code.
* **Cons**: This method only works for setting a single style property (e.g., `transform`) and not multiple styles at once.

**Library: None**

There are no external libraries used in this benchmark. The tests use built-in JavaScript objects and DOM methods to set the styles on the HTML element.

**Special JS Feature or Syntax: None**

This benchmark doesn't use any special JavaScript features or syntax, such as async/await, promises, or modern ES6+ features like classes or decorators.

**Benchmark Results**

The latest benchmark results show that `setAttribute` is the fastest approach (33.2 executions per second), followed closely by `style.setProperty` (44.61 executions per second). The other approaches perform slower.

**Alternatives**

For this specific benchmark, other alternatives could be:

* Using a library like CSSOM (CSS Object Model) to manipulate styles on an HTML element.
* Implementing a custom style setter that uses the Web Workers API to offload style calculations.
* Comparing performance using different DOM mutation algorithms or techniques.

Keep in mind that these alternatives may not provide significant performance improvements and might introduce additional complexity.

Related benchmarks:

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

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

Created: 4 years ago by: Guest

Jump to the latest result

style.setProperty

style.cssText

style

Object.assign

setAttribute

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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