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

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++; }
style properties
let i = 0; while (i < 10000) { el.style.height = '1vh'; el.style.width = '1vw'; el.style.color = 'red'; el.style.border = '1vmin solid red'; el.style.backgroundColor = 'black'; el.style.padding = '0.5vmin'; 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
style properties

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:136.0) Gecko/20100101 Firefox/136.0

Browser/OS: Firefox 136 on Windows

View result in a separate tab

Test name	Executions per second
style.setProperty	13.8 Ops/sec
style.cssText	52.3 Ops/sec
style	47.9 Ops/sec
Object.assign	13.3 Ops/sec
setAttribute	834.7 Ops/sec
style properties	14.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 6 months ago):

LLMs can make mistakes. Check important info.

The benchmark you've provided tests six different methods for applying CSS styles to an HTML element using JavaScript. Specifically, it measures how many times each approach can execute over a set loop of 10,000 iterations. The tests compare the following approaches:

1. **`style.setProperty`**: This method allows setting a CSS property and its value on an element's style interface. You call it with the name of the property and the new value. This gives good control over individual CSS properties and is well-suited for dynamic styling as it also respects CSS specificity.

- **Pros**: 
     - Individual property control.
     - Facilitates modifying specific styles without affecting others.
     - Also allows setting CSS values using various units (like in `px`, `%`, etc.).
   - **Cons**: 
     - Each call is an individual operation, which can lead to slower execution if multiple styles need to be set.

2. **`style.cssText`**: This property allows you to set all CSS properties of an element in one string. You basically provide a full CSS declaration without the need to set properties individually.

- **Pros**: 
     - Quick way to apply multiple styles in one go.
     - Minimal code as everything can be stated in a single line.
   - **Cons**: 
     - Overwrites all existing styles, which could lead to unintentional style loss.
     - Can be less readable for complex styles.

3. **Assigning to `style`**: This means completely overwriting the entire inline style with a new string of CSS. It works similarly to `style.cssText`, applying all styles in one go.

- **Pros**: 
     - Concise method to apply styles.
     - Fast application as intended styles are set directly.
   - **Cons**: 
     - Like `cssText`, this completely replaces all previous styles.
     - Risk of forgetting existing styles needed for the element.

4. **`Object.assign`**: This method is used to copy values from one or more source objects to a target object, in this case, to apply multiple CSS properties defined in an object to the style of the element.

- **Pros**: 
     - Allows for dynamic style construction, i.e., properties can be defined in a central object and applied as needed.
     - More modular and reusable than other approaches.
   - **Cons**: 
     - May be slower due to the additional overhead of a function call.

5. **`setAttribute`**: This method sets the value of an attribute on the specified element. When used for `style`, it applies all styles as a string to the style attribute.

- **Pros**: 
     - Can set multiple styles in one string similar to `cssText`.
     - More traditional and broadly understood method across different attributes.
   - **Cons**: 
     - Overwrites previously set styles.
     - Unlike `setProperty`, you lose control over individual near-instant changes.

6. **Direct assignment to style properties**: Here, each property (like `height`, `width`, etc.) is set individually.

- **Pros**:
     - Very explicit and readable, making it clear what each style does.
     - Less risk of overwriting other styles unintentionally.
   - **Cons**: 
     - More verbose and can become cumbersome if applying many styles, leading to less maintainable code.

### Benchmark Results
From the latest benchmark results, each approach shows different "ExecutionsPerSecond," indicating how many times each method could be executed within the loop over 10,000 iterations. The fastest method, `setAttribute`, appears to perform significantly better than the others, likely because of its straightforward nature in altering the style attribute directly, as opposed to the complexity involved with `setProperty`, `cssText`, and object-style manipulations.

### Other Alternatives
There are alternative methods to manage styles in JavaScript:

- **Using CSS Classes**: Instead of manipulating styles directly through JavaScript, you can add or remove classes that are defined within a CSS file. This will typically be more performance-friendly, as it allows the browser to handle the rendering optimally.

- **CSS Preprocessors**: Tools such as SASS or LESS can help organize styles and make them more maintainable, reducing reliance on JavaScript for styling.

- **CSS-in-JS libraries**: Libraries like Styled-components or Emotion allow you to write CSS directly within JavaScript, managing styles dynamically. They are beneficial when working within component-based frameworks like React for scoped styles.

By understanding the pros and cons of each approach, developers can choose the most suitable method for their specific use cases, ensuring both performance and maintainability of their code.

Related benchmarks:

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

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

Created: 6 months ago by: Registered User

Jump to the latest result

style.setProperty

style.cssText

style

Object.assign

setAttribute

style properties

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 6 months ago):