Benchmark: CSS: .setProperty vs. Object.assign vs. .style vs. cssText-append

HTML Preparation code:

<div id="benchmark"></div>

Script Preparation code:

const numTests = 10000;
const el = document.getElementById("benchmark");
const css = (new Array(numTests)).fill(0).map(() => ({
   "opacity": `${Math.random()}`,
   "zIndex": `${Math.floor(Math.random() * 1000)}`
}));

Tests:

setProperty
let i = 0; while (i < numTests) { for (const s in css[i]) { el.style.setProperty(s.replace(/([a-z][A-Z])/g, (m) => m[0] + "-" + m[1].toLowerCase()), css[i][s]); } i++; }
Object.assign
let i = 0; while (i < numTests) { Object.assign(el.style, css[i]); i++; }
.style
let i = 0; while (i < numTests) { for (const s in css[i]) { el.style[s] = css[i][s]; } i++; }
.cssText
let i = 0; while (i < numTests) { console.log(i, css[i]); const s = Object.entries(css[i]).map(([key, value]) => `${key}:${value}`).join(";"); el.style.cssText += s; i++; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
setProperty
Object.assign
.style
.cssText

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.3 Safari/605.1.15

Browser/OS: Safari 18 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
setProperty	32.5 Ops/sec
Object.assign	35.3 Ops/sec
.style	35.9 Ops/sec
.cssText	31.9 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark on MeasureThat.net is focused on comparing the performance of different methods for manipulating the inline styles of HTML elements in JavaScript. The methods evaluated include:

1. **`element.style.setProperty()`**
2. **`Object.assign()`**
3. **Direct assignment via `element.style`**
4. **Appending to `element.style.cssText`**

### Options Compared

1. **`setProperty`**: This method allows setting a specific CSS property on an element. It takes two parameters: the property name (formatted traditionally as a CSS property with dashes) and the value. The value is applied exactly as intended, which can involve converting camelCase property names to dash-separated names (e.g., `backgroundColor` to `background-color`).

**Pros**:
   - Explicit and clear. It shows exactly what property is being modified.
   - Better at dealing with vendor prefixes if necessary.

**Cons**:
   - Potentially slower due to the conversion of property names and method call overhead.

2. **`Object.assign`**: This method is used to copy the properties from one or more source objects to a target object. Here, it copies CSS properties from a predefined object to the element’s style object.

**Pros**:
   - Clean and concise syntax for bulk assignments.
   - Easier to manage multiple styles at once.

**Cons**:
   - Might not handle vendor prefixes or camelCase property names directly, resulting in potentially unexpected behavior if properties are named incorrectly.

3. **Direct assignment via `.style`**: This method involves directly manipulating the `style` object of the element by setting individual properties.

**Pros**:
   - Familiar and straightforward for those who are accustomed to JavaScript property assignment.
   - Readable when altering a few specific properties.

**Cons**:
   - Less efficient for bulk updates since it requires repetitive property assignments.

4. **Appending to `cssText`**: This method modifies the `cssText` property of the `style` object, which is a string representation of all inline styles. By adding new properties as a string, it concatenates styles directly.

**Pros**:
   - Can be very efficient for bulk updates, as all styles are set in one operation.
   - Allows for easy manipulation of multiple style declarations together.

**Cons**:
   - String manipulation can lead to errors or malformed styles if not formatted correctly.
   - Overwrites existing styles if the same property is specified multiple times.

### Libraries and Special Features

The benchmark does not utilize any external libraries, relying solely on the built-in DOM and JavaScript functionalities. All the methods are part of the standard JavaScript API for manipulating the Document Object Model (DOM).

### Considerations and Performance Metrics

The benchmark results show the executions per second for each method in the Safari browser on a specific desktop environment. The `el.style` (direct assignment) method yielded the highest performance at approximately 35.93 executions per second, followed by `Object.assign` and `setProperty`. The method that performed the least well was appending to `cssText`.

### Alternatives and Other Considerations

In addition to the methods measured, there are various other approaches to style manipulation in JavaScript:

- **Using CSS Classes**: Instead of directly manipulating styles with JavaScript, toggling classes on elements can be more efficient. This approach separates concerns and allows for cleaner and more maintainable code.

- **CSS-in-JS Libraries**: Libraries like styled-components or Emotion can dynamically generate styles and encapsulate CSS rules within JavaScript, making style management more organized and consistent.

- **Framework-specific Solutions**: For applications using frameworks like React, Angular, or Vue, the respective paradigms (like JSX styling in React) provide optimized methods to handle styles within components efficiently.

Ultimately, the choice of style manipulation method depends on the specific use case, performance needs, and maintainability considerations within the project's context.

Related benchmarks:

CSS: .setProperty vs. Object.assign vs. .style vs. cssText-append (version: 1)

Tests whether manipulating an HTML element's inline styles is fastest via .setProperty(), Object.assign, .style or by appending to the cssText.

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

Created: 6 days ago by: Registered User

Jump to the latest result

setProperty

Object.assign

.style

.cssText

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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