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

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++; }
direct assignment
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
direct assignment

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 benchmark provided evaluates different methods for applying CSS styles to a DOM element (in this case, a `<div>` with the ID of "test") in JavaScript. Specifically, it compares six different approaches to modifying style properties, measuring their performance by counting how many times they can be executed in one second. The methods being compared are:

1. **`style.setProperty`**: This method allows for setting a CSS property on an element by specifying the property name and value. It is a flexible way to set styles dynamically because it takes care of any necessary vendor prefixes.

**Pros**:  
   - Allows for advanced styling such as custom properties or CSS variables.
   - Supports all CSS properties without restrictions.

**Cons**:  
   - Slower compared to bulk or direct assignment methods.

2. **`style.cssText`**: This property allows for setting an entire set of CSS styles as a single string. This method essentially replaces the current inline styles with a new string of CSS.

**Pros**:  
   - Quick way to set multiple styles at once.
   - Easier to read when writing CSS styles inline.

**Cons**:  
   - It overrides all existing inline styles, breaking any previously set styles.
   - Less control over individual properties.

3. **Direct property assignment (`el.style.property`)**: This method sets properties directly on the `style` object of the element (e.g., `el.style.height = '1vh';`).

**Pros**:  
   - Clear and straightforward for setting individual styles.
   - Does not override other styles, only modifies the specified ones.

**Cons**:  
   - More verbose when setting multiple properties, as it requires individual assignments.

4. **`Object.assign`**: This method uses JavaScript's `Object.assign` function to copy properties from a defined object into the `style` property of the element.

**Pros**:  
   - Allows for setting multiple properties simultaneously.
   - Can be cleaner and more organized, especially when using pre-defined style objects.

**Cons**:  
   - This method does not handle CSS properties that require units (e.g., using `1vmin` instead of just a number).
   - Slightly slower compared to simpler direct assignments.

5. **`setAttribute`**: This DOM method sets or removes an attribute on the specified element, which in this case is being used to set an entire style string.

**Pros**:  
   - Similar to `cssText`, it can apply multiple styles at once without affecting the style properties that are not set.

**Cons**:  
   - Like `style.cssText`, it overrides existing inline styles and can't specify styles individually.

6. **Direct assignment to the `el.style` object**: This involves setting properties directly on the `style` object for each CSS property.

**Pros**:  
   - Clear and explicit, allowing for easy debugging.
   - Changes do not interfere with other styles.

**Cons**:  
   - More verbose when applying multiple properties; lots of lines of code.

### Benchmark Results Summary
Based on the benchmark results, the **best performance was observed with `setAttribute`**, executing approximately 141.46 times per second, while **direct assignment** and **`Object.assign`** performed least efficiently at around 9.78 and 19.37 times per second, respectively. This indicates that methods involving batch updates (like `setAttribute` and `cssText`) tend to perform better in situations where multiple styles need to be applied efficiently.

### Alternatives
Other alternatives for modifying styles in a web environment might include:

- **CSS Classes**: Instead of directly modifying styles with JavaScript, you can toggle CSS classes on elements using methods like `classList.add()` and `classList.remove()`. This approach allows you to define styles in CSS files, promoting better separation of concerns.

- **CSS Variables**: CSS custom properties (variables) can be set using JavaScript and can provide a more dynamic styling approach based on themes or user interactions.

- **JavaScript libraries**: Libraries like jQuery simplify DOM manipulation and can provide optimized functions for styling that may be better tested across different browsers. However, utilizing libraries comes with the overhead of including additional code in your project.

- **CSS-in-JS libraries**: Modern frameworks like React often use CSS-in-JS for styling components. Libraries like styled-components or Emotion not only handle styles but also encapsulate them in component logic, allowing for dynamic updates.

In conclusion, while it is crucial to select appropriate methods based on performance, ease of use, and maintainability, each approach has its strengths and weaknesses and should be considered carefully within the context of your specific application requirements and technological constraints.

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	19.7 Ops/sec
style.cssText	27.1 Ops/sec
style	26.1 Ops/sec
Object.assign	19.4 Ops/sec
setAttribute	141.5 Ops/sec
direct assignment	9.8 Ops/sec

Related benchmarks:

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

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

Created: one month ago by: Guest

Jump to the latest result

style.setProperty

style.cssText

style

Object.assign

setAttribute

direct assignment

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):