Benchmark: 1 property - 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("font-size","12px"); i++; }
style.cssText
let i = 0; while (i < 10000) { el.style.cssText = "font-size:12px;"; i++; }
style
let i = 0; while (i < 10000) { el.style = "font-size:12px;"; i++; }
Object.assign
let style = { fontSize: "12px", }; let i = 0; while (i < 10000) { Object.assign(el.style, style); i++; }
setAttribute
let i = 0; while (i < 10000) { el.setAttribute("style","font-size:12px;"); i++; }
style properties
let i = 0; while (i < 10000) { el.style.fontSize = "12px"; 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

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

LLMs can make mistakes. Check important info.

The provided benchmark tests various approaches for setting CSS styles on a DOM element in JavaScript. Each approach has its own method of applying styles, which allows users to compare performance metrics like execution speed. Let’s explore each of the methods being benchmarked, their pros and cons, as well as any pertinent considerations.

### Benchmark Options Compared

1. **style.setProperty**
   - **Definition**: `el.style.setProperty("font-size", "12px");`
   - **Description**: Sets a CSS property directly by specifying the property name and value.
   - **Pros**:
     - Very specific and allows for setting CSS properties with exactness (including vendor prefixes).
     - Handles CSS properties that require special formatting (e.g., hyphenated properties).
   - **Cons**:
     - Slightly more verbose than directly accessing the property.

2. **style.cssText**
   - **Definition**: `el.style.cssText = "font-size:12px;";`
   - **Description**: Sets the entire inline style of the element as a string.
   - **Pros**:
     - Fast when setting multiple styles at once, since it applies them in one call.
   - **Cons**:
     - Overwrites existing styles — cannot modify a single property without rewriting all other properties.
     - Syntax can be less readable especially if multiple styles are set.

3. **style (property assignment)**
   - **Definition**: `el.style = "font-size:12px;";`
   - **Description**: Directly assigns a string to the style property.
   - **Pros**:
     - Straightforward and intuitive syntax; resembles CSS.
   - **Cons**:
     - Similar limitation as cssText, as it overwrites the entire style object, potentially losing other styles.

4. **Object.assign**
   - **Definition**: `Object.assign(el.style, { fontSize: "12px" });`
   - **Description**: Merges properties from a source object into the target object.
   - **Pros**:
     - Non-destructive; can add or modify specific properties while maintaining others.
     - Cleaner syntax for multiple styles.
   - **Cons**:
     - The overhead of creating an intermediate object and the function call itself might introduce slight performance penalties.

5. **setAttribute**
   - **Definition**: `el.setAttribute("style", "font-size:12px;");`
   - **Description**: Sets the entire style attribute directly on the element.
   - **Pros**:
     - Similar to cssText and often simple to use.
   - **Cons**:
     - Overwrites existing styles, and dealing with concatenated styles becomes cumbersome.
     - Potentially less efficient than direct manipulations through the style object.

6. **style properties**
   - **Definition**: `el.style.fontSize = "12px";`
   - **Description**: Directly sets a specific CSS property on the style object.
   - **Pros**:
     - Straightforward and allows direct assignment.
     - Readable and maintains existing styles.
   - **Cons**:
     - Can be verbose if setting multiple properties; requires more lines of code to set multiple styles.

### Performance Results Analysis

The benchmarking results show the number of executions per second for each method. **style.setProperty** performed the best, followed by **Object.assign** and **setAttribute**. The **style properties** and **style.cssText** methods performed significantly slower, with **style** being the least efficient.

### Other Considerations

- **Browser Compatibility**: Most of these methods are widely supported across modern browsers. However, performance may vary between different browsers or devices.
- **Use Case**: The choice of method may depend on the scenario. For example, if multiple styles need to be set frequently in a loop, `style.cssText` may initially appear appealing but will complicate existing styles. If modifying a single style frequently, `style.setProperty` or direct property assignment would be preferable.
- **Readability and Maintainability**: When working on larger codebases, choosing methods that enhance readability and maintainability can sometimes outweigh performance considerations.

### Alternatives

Other alternative approaches could include using CSS classes instead of direct style manipulation. For example, one could define a CSS class in a stylesheet and simply toggle classes on an element. This method often provides improved performance for complex style manipulations, as it leverages the browser’s CSS engine rather than JavaScript execution.

In conclusion, the benchmark highlights the trade-offs of each approach for dynamically applying styles, allowing developers to make informed decisions based on their specific use cases, performance needs, and code maintainability.

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36

Browser/OS: Chrome 129 on Linux

View result in a separate tab

Test name	Executions per second
style.setProperty	209.6 Ops/sec
style.cssText	81.3 Ops/sec
style	62.3 Ops/sec
Object.assign	150.8 Ops/sec
setAttribute	141.8 Ops/sec
style properties	94.6 Ops/sec

Related benchmarks:

1 property - 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: one month 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 one month ago):