Benchmark: CSS Variable swaps - 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 = "--test-color:blue;"; i++; }
style
let i = 0; while (i < 10000) { el.style = "--test-color:blue;"; i++; }
Object.assign
let style = { "--test-color": 'blue' }; let i = 0; while (i < 10000) { Object.assign(el.style, style); i++; }
setAttribute
let i = 0; while (i < 10000) { el.setAttribute('style',"--test-color:blue;"); 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

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 130 on Android

View result in a separate tab

Test name	Executions per second
style.setProperty	125.0 Ops/sec
style.cssText	109.2 Ops/sec
style	88.7 Ops/sec
Object.assign	434.8 Ops/sec
setAttribute	554.2 Ops/sec
classList	381.1 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 13 days ago):

LLMs can make mistakes. Check important info.

The benchmark outlined in the provided JSON is focused on testing various methods for updating CSS variable values within a web element in JavaScript. Specifically, it compares the performance of six different approaches:

1. **style.setProperty**
2. **style.cssText**
3. **style**
4. **Object.assign**
5. **setAttribute**
6. **classList**

### Description of Each Approach

1. **style.setProperty**
   - This method sets a specific CSS property value directly. It allows for individual property updates without affecting other style properties.
   - **Pros**: Direct and straightforward for modifying specific properties. Maintains existing styles.
   - **Cons**: Can become slightly tedious when modifying numerous properties due to its specific targeting.

2. **style.cssText**
   - This property allows you to set multiple style elements at once by assigning a complete string of CSS styles.
   - **Pros**: Efficient for bulk assignments; simpler syntax when setting numerous properties.
   - **Cons**: Overwrites all existing styles, which may lead to unexpected results if not handling existing properties carefully.

3. **style**
   - This is essentially an assignment of the entire style object, similar to `style.cssText`, but structured to assign the entire styles directly via an object format.
   - **Pros**: Can set many styles in a single operation.
   - **Cons**: Similar to `cssText`, it will overwrite existing styles leading to potential loss of other applied styles.

4. **Object.assign**
   - This method takes the values from the provided object—here, an object with CSS variables—and applies them to the style object of the element.
   - **Pros**: Merges styles without overwriting existing properties. Suitable for dynamic style assignment when properties vary.
   - **Cons**: Slightly overhead due to the object merging process compared to direct assignments, but it generally performs well.

5. **setAttribute**
   - This method modifies the `style` attribute of the element by assigning a complete style string.
   - **Pros**: Simple and can be related to traditional ways of setting attributes. 
   - **Cons**: Like `cssText`, it overwrites all existing styles, causing potential issues with previously assigned styles.

6. **classList**
   - This method is used to add or remove classes from an element's class list. Here it adds a class that applies specific CSS rules defined in styles.
   - **Pros**: Best for applying groups of styles, making it easy to toggle styles. Doesn't affect other classes; encapsulates styles neatly.
   - **Cons**: May not be as performant when class manipulations are needed repeatedly, depending on the number of classes involved.

### Market Comparison
There are alternative approaches to managing styles in JavaScript. Using a CSS-in-JS library (like styled-components or Emotion) can manage styles dynamically and maintain performance while providing a structured way to manage style definitions. These libraries often leverage JavaScript's flexibility to handle styles more declaratively than traditional DOM manipulation methods.

### Result Analysis
In the benchmark results, `setAttribute` performed the best in terms of execution speed, followed by `classList` and `Object.assign`. The `style.setProperty`, `style.cssText`, and `style` methods were notably slower, possibly due to the overhead of DOM manipulation involved with those methods.

This benchmark serves as a comparison guide for developers to choose the best approach for updating CSS variables in applications, highlighting performance considerations as well as the context of use for each method. Evaluating these pros and cons will help engineers decide which technique suits their specific requirements best, considering maintainability and performance.

Related benchmarks:

CSS Variable swaps - 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: 13 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 13 days ago):