Benchmark: 6 properties - style.setProperty vs style.cssText vs style vs Object.assign vs setAttribute (with string concat)

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; const obj = { color: 'red', border: '1vmin solid red', padding: '0.5vmin', 'background-color': 'black', height: '1vh', width: '1vw' } const forgeStyleString = () => { return Object.keys(obj).reduce((p, key) => { return p + `${key}: ${obj[key]}; ` }, '') } while (i < 10000) { el.setAttribute('style',forgeStyleString()); 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: one month ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Browser/OS: Chrome 134 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
style.setProperty	107.1 Ops/sec
style.cssText	114.7 Ops/sec
style	104.0 Ops/sec
Object.assign	108.1 Ops/sec
setAttribute	365.8 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):

LLMs can make mistakes. Check important info.

The benchmark outlined in the provided JSON focuses on evaluating the performance of different methods for applying CSS styles to a DOM element in JavaScript. The tests specifically compare five different approaches for styling, and the goal is to determine which method performs best under repetitive use.

### Comparison of Approaches:

1. **`style.setProperty`**
   - **Test Name**: `style.setProperty`
   - **Code Implementation**: Uses the `setProperty` method of the `CSSStyleDeclaration` interface to set individual style properties in a loop.
   - **Pros**:
     - Clear and explicit setting of individual styles.
     - Good for dynamically changing styles property by property.
   - **Cons**:
     - Can be inefficient in high-volume updates (like in this benchmark) due to multiple property accesses.
 
2. **`style.cssText`**
   - **Test Name**: `style.cssText`
   - **Code Implementation**: Sets the entire CSS declaration string for the element’s style property.
   - **Pros**:
     - Concise and efficient for setting multiple styles at once.
     - Easier to read/modify when handling complex style changes.
   - **Cons**:
     - Rewriting the entire stylesheet can be less efficient if only a few properties change.
     - May lead to the loss of previously set inline styles not explicitly included in the string.

3. **`style` Assignment**
   - **Test Name**: `style`
   - **Code Implementation**: Directly assigns a CSS string to the element's style property.
   - **Pros**:
     - Similar to `cssText`, it allows bulk updates of styles.
   - **Cons**:
     - Less readable and maintainable.
     - Like `cssText`, it can lead to overwriting existing styles.

4. **`Object.assign`**
   - **Test Name**: `Object.assign`
   - **Code Implementation**: Creates an object with desired styles and uses `Object.assign` to copy those styles onto the element’s style property.
   - **Pros**:
     - Modular and reusable, as the style object can be reused.
     - Avoids overwriting existing inline styles.
   - **Cons**:
     - Requires creating the object and running the assign operation, which might not be optimal for performance-intensive scenarios.

5. **`setAttribute` with Style String Generation**
   - **Test Name**: `setAttribute`
   - **Code Implementation**: Generates a style string from an object mapping and sets it using `setAttribute`.
   - **Pros**:
     - Flexible and allows for dynamic generation of styles.
     - Can facilitate management of multiple CSS rules.
   - **Cons**:
     - Using `setAttribute` could be slower due to string manipulation and function calls.
     - Overwrites existing styles, similar to `style.cssText`.

### Key Takeaways from Benchmark Results:

Based on the benchmark results provided:

- **Most Performant Option**: The method that achieved the highest performance (365.76 executions per second) was the `setAttribute` approach, indicating that constructing a style string and setting it in one go is the most efficient for large scale updates.
- **Least Performant Option**: `style.setProperty` was among the slower options, as it individually sets each CSS property, accumulating overhead.

### Other Considerations:
While the above five methods are valid and commonly used in JavaScript, other alternatives include:

- **CSS Classes**: Instead of manipulating inline styles, toggle CSS classes on your elements using `classList.add()`, `classList.remove()`, or `classList.toggle()`. This can offer considerable performance benefits and better maintainability, especially for complex styles defined in stylesheets.
  
- **CSS-in-JS Libraries**: Libraries such as Styled Components and Emotion allow for a more dynamic approach to styling in React applications. These have their own trade-offs in terms of performance, especially with server-side rendering considerations.

Understanding these different approaches and their implications on performance can guide software engineers in optimizing their applications' styling strategies effectively.

Related benchmarks:

6 properties - style.setProperty vs style.cssText vs style vs Object.assign vs setAttribute (with string concat) (version: 1)

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

Created: one month ago by: Guest

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 gpt-4o-mini, generated one month ago):