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

HTML Preparation code:

<style>
  :root {
  	--test-color: 'red';
  }
  
  .test {
  	color: var(--test-color);
  }
  
  .test-blue {
  	--test-color: 'blue';
  }
  
</style>

<div id="test"></div>

Script Preparation code:

el = document.getElementById("test");

Tests:

style.setProperty
let i = 0; while (i < 10000) { el.style.setProperty("--test-color","blue"); 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++; }
classList
let i = 0; while (i < 10000) { el.classList.add('test-blue'); 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
classList

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated yesterday):

LLMs can make mistakes. Check important info.

This benchmark on MeasureThat.net evaluates various approaches for applying CSS styles to a DOM element in JavaScript. Specifically, it compares six different methods for changing the styles of an HTML element repeatedly within a loop of 10,000 iterations. Each method is tested to determine how performant it is in terms of executions per second.

### Methods Compared

1. **style.setProperty**
   - **Description**: This method sets a CSS property on an element’s style object by specifying the property name and value.
   - **Pros**:
     - More granular control—allows you to change individual CSS variables or properties.
     - Can be used for setting custom properties (CSS variables).
   - **Cons**:
     - Potentially slower than other mass assignment methods when multiple properties need updating.
     
2. **style.cssText**
   - **Description**: This method is a string representation of the element's inline CSS. By setting `cssText`, you can override all the styles of the element.
   - **Pros**:
     - Fast for setting multiple properties at once—overwrites all existing inline styles with a single string.
   - **Cons**:
     - Risk of losing existing styles unintentionally since it replaces all current styles.

3. **style (direct assignment)**
   - **Description**: The style property can be assigned an object-like string similar to `cssText`.
   - **Pros**:
     - Simple to understand and read.
   - **Cons**:
     - Similar to `cssText`, but lacks the performance due to repeated reassignment of the style object as a whole.

4. **Object.assign**
   - **Description**: This method copies the properties of a JavaScript object and applies them to the element’s style property.
   - **Pros**:
     - Extensive flexibility, allowing for bulk property assignment and maintaining existing styles.
   - **Cons**:
     - Can be slower for direct style manipulation compared to methods like `setProperty` or `cssText`.

5. **setAttribute**
   - **Description**: This method sets an HTML attribute on an element. Here, it’s used to set the 'style' attribute directly as a string.
   - **Pros**:
     - Works universally across all attributes. Useful when you have to set the entire attribute at once.
   - **Cons**:
     - Slow due to the overhead of manipulating attributes and can cause a reflow/repaint operation on the DOM.

6. **classList (add)**
   - **Description**: This method is used to manipulate the class list of an element, allowing you to add or remove classes.
   - **Pros**:
     - Fast and efficient; can easily toggle styles applied via CSS classes.
     - Keeps JavaScript and CSS concerns separated, improving maintainability.
   - **Cons**:
     - Requires the pre-definition of classes in CSS, which may not always be feasible if styles are dynamic.

### Benchmark Results

From the benchmark results provided:

- **Fastest Method**: `setAttribute` executed at approximately 1036 executions per second.
- **Moderately Fast Methods**: `classList` (around 807 executions per second) and `style.setProperty` (around 408 executions per second).
- **Slowest Methods**: `style.cssText` (around 102 executions per second), `style` (around 92 executions per second), and `Object.assign` (around 89 executions per second).

### Other Considerations

1. **Performance Impact**: The choice of styling method has a significant impact on performance, particularly in scenarios involving frequent updates (like animations or dynamic styling).
  
2. **Maintainability**: While performance is essential, maintaining readable and manageable code should also be a priority.

3. **Browser Compatibility**: Different browsers may optimize these operations differently, which might impact performance in real-world scenarios.

### Alternatives

Other alternatives for styling could have included:

- **CSS variables**: When supported, CSS variables can be manipulated dynamically, optimizing for performance while providing flexibility.
- **JavaScript frameworks**: Libraries and frameworks like React or Vue have their methods for style manipulation that might abstract away some of these performance considerations but come with their overhead.

In conclusion, the choice of method for applying styles in JavaScript has significant implications for both performance and maintainability, and developers should choose based on the specific requirements of their applications while performing due diligence through testing.

Latest run results:

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

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

Browser/OS: Chrome 130 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
style.setProperty	408.5 Ops/sec
style.cssText	102.4 Ops/sec
style	92.9 Ops/sec
Object.assign	89.1 Ops/sec
setAttribute	1036.7 Ops/sec
classList	806.8 Ops/sec

Related benchmarks:

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

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

Created: 2 days ago by: Guest

Jump to the latest result

style.setProperty

style.cssText

style

Object.assign

setAttribute

classList

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated yesterday):