Benchmark: style.setProperty vs style.cssText vs style vs attributeStyleMap.set vs style.prop

HTML Preparation code:

<div id="test"></div>

Script Preparation code:

el = document.getElementById("test");

Tests:

style.setProperty
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");
style.cssText
el.style.cssText = "color:red;border:1vmin solid red;padding:0.5vmin;background-color:black;height:1vh;width:1vw;";
style
el.style = "color:red;border:1vmin solid red;padding:0.5vmin;background-color:black;height:1vh;width:1vw;";
attributeStyleMap.set
el.attributeStyleMap.set("color","red"); el.attributeStyleMap.set("border","1vmin solid red"); el.attributeStyleMap.set("padding","0.5vmin"); el.attributeStyleMap.set("background-color","black"); el.attributeStyleMap.set("height","1vh"); el.attributeStyleMap.set("width","1vw");
style.prop
el.style.color = "red"; el.style.border = "1vmin solid red"; el.style.padding = "0.5vmin"; el.style.backgroundColor = "black"; el.style.height = "1vh"; el.style.width = "1vw";

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
style.setProperty
style.cssText
style
attributeStyleMap.set
style.prop

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: yesterday)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Browser/OS: Chrome 135 on Windows

View result in a separate tab

Test name	Executions per second
style.setProperty	561716.5 Ops/sec
style.cssText	692595.5 Ops/sec
style	600811.2 Ops/sec
attributeStyleMap.set	215621.4 Ops/sec
style.prop	550925.2 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark you're looking at evaluates the performance of various methods for applying styles to a DOM element using JavaScript. Specifically, it tests the efficiency of:

1. **`style.setProperty`**
2. **`style.cssText`**
3. **`style` (assignment via string)**
4. **`attributeStyleMap.set`**
5. **`style.prop` (setting properties directly on the style object)**

### Description of Each Approach

1. **`style.setProperty`**:
   - **Definition**: This method allows you to set a specific CSS property and its value on a style object directly.
   - **Example**: `el.style.setProperty("color", "red")`
   - **Pros**: Allows precise control over individual CSS properties, including providing custom priority (using the third parameter).
   - **Cons**: Slightly more verbose because each property needs to be set individually, which may introduce more overhead in tight performance-sensitive loops.

2. **`style.cssText`**:
   - **Definition**: This property allows setting multiple CSS properties at once using a single string.
   - **Example**: `el.style.cssText = "color:red; border:1vmin solid red; ...";`
   - **Pros**: Fast for setting multiple properties because it minimizes the number of interactions with the style object.
   - **Cons**: If a single property needs to change, you must rewrite the whole `cssText`, which doesn’t allow for partial updates without extracting and reinserting existing styles.

3. **`style` (assignment via string)**:
   - **Definition**: Directly assigning a string representing CSS styles to the `style` property of an element.
   - **Example**: `el.style = "color:red; border:1vmin solid red; ...";`
   - **Pros**: Similar to `cssText`, it's straightforward and encapsulates all styles.
   - **Cons**: Overwrites all existing styles, leading to loss of previously set styles.

4. **`attributeStyleMap.set`**:
   - **Definition**: A newer API providing more modern ins consistent access for setting style properties through an object-based map.
   - **Example**: `el.attributeStyleMap.set("color", "red")`
   - **Pros**: Allows better manipulation of styles within a Map-like interface, which may lead to less boilerplate code.
   - **Cons**: It is less widely supported in older browsers; thus, compatibility could be an issue when considering broader audience reach.

5. **`style.prop` (direct property access)**:
   - **Definition**: Accessing and setting styles directly as properties of the style object.
   - **Example**: `el.style.color = "red";`
   - **Pros**: Intuitive and close to the way CSS is written, making it easy to understand and implement.
   - **Cons**: Requires more lines of code for multiple properties compared to setting all properties at once via `cssText`.

### Benchmark Results

The benchmark results indicate the execution speed of each method measured in executions per second on a specific browser (Chrome 135):

- **Highest Performance**: `style.cssText`, with approximately **824,533** executions per second.
- **Next**: `style.setProperty`, close behind at **802,601** executions per second.
- **Following**: `style`, with around **763,011.5** and `style.prop` at **757,707.9**.
- **Lowest Performance**: `attributeStyleMap.set` at **284,681** executions per second.

### Considerations

When choosing between these methods, consider the following factors:
- **Browser Compatibility**: If you need to support older browsers, `attributeStyleMap` may not be viable.
- **Performance Needs**: If you are setting multiple styles, using `cssText` can provide significant performance benefits.
- **Dynamic Style Changes**: If styles need to change dynamically often or selectively, `style.setProperty` and direct property access methods may be preferable.
- **Readability and Maintenance**: Approaches like `style.prop` could aid in readability but at the cost of performance in batch updates.

### Alternatives

Other alternatives for managing styles in a web application could include:
- **CSS Classes**: Instead of setting styles directly, consider manipulating class names, which can be more efficient in some cases and can allow for better separation of styles from JavaScript logic.
- **CSS-in-JS Libraries**: Frameworks like Styled Components or Emotion, which allow conditional styling based on component states or props.
- **Preprocessor Mixins and Functions**: For generating complex stylesheets where maintainability and reuse are a priority.

In summary, this benchmark provides valuable insights into how different methods for changing CSS properties in JavaScript perform and can help engineers choose the most appropriate method based on their specific requirements.

Related benchmarks:

style.setProperty vs style.cssText vs style vs attributeStyleMap.set vs style.prop (version: 1)

Comparing performance of: style.setProperty vs style.cssText vs style vs attributeStyleMap.set vs style.prop

Created: 2 days ago by: Registered User

Jump to the latest result

style.setProperty

style.cssText

style

attributeStyleMap.set

style.prop

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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