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

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("transition", "transform 0s;") el.style.setProperty("transform","translate3d(0,' + 35 +'px,0);"); i++; }
style.cssText
let i = 0; while (i < 10000) { el.style.cssText = 'transform: translate3d(0,' + 35 + 'px,0); transition: transform 0s;'; i++; }
style
let i = 0; while (i < 10000) { el.style = 'transform: translate3d(0,' + 35 + 'px,0); transition: transform 0s;'; i++; }
Object.assign
let style = { transition: "transform 0s;", transform: "translate3d(0,' + 35 +'px,0);" }; 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++; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 114 on Windows

View result in a separate tab

Test name	Executions per second
style.setProperty	74.4 Ops/sec
style.cssText	69.3 Ops/sec
style	57.6 Ops/sec
Object.assign	72.9 Ops/sec
setAttribute	377.8 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months ago):

LLMs can make mistakes. Check important info.

The provided JSON represents a benchmark test case for JavaScript performance comparison. The test focuses on the different ways to set CSS styles in a web page.

**What is being tested:**

The test compares four approaches to setting CSS styles:

1. `style.setProperty()`: A method that sets a property directly on an element's style object.
2. `style.cssText`: A property that allows setting multiple CSS styles as a single string.
3. `style`: An object-like syntax for setting CSS styles (similar to `style.cssText`, but using dot notation).
4. `Object.assign()` with the `style` property: Assigning an object's properties to an element's style object.
5. `setAttribute()`: Setting the `style` attribute of an element as a string.

**Comparison options and their pros and cons:**

1. **`style.setProperty()`**: This method is generally faster because it avoids the overhead of parsing and executing multiple CSS styles in a single operation.
	* Pros: Fast, efficient, and easy to use.
	* Cons: Limited flexibility; can't set multiple properties at once.
2. **`style.cssText`**: This property allows setting multiple CSS styles as a single string, which can be more convenient for simple cases.
	* Pros: Convenient for simple style assignments, easy to read and write.
	* Cons: Slower than `setProperty()` due to the overhead of parsing and executing multiple styles in a single operation.
3. **`style`**: This object-like syntax is similar to `style.cssText`, but uses dot notation instead.
	* Pros: Similar flexibility to `cssText`, easy to read and write.
	* Cons: Slower than `setProperty()` due to the overhead of parsing and executing multiple styles in a single operation.
4. **`Object.assign()` with the `style` property**: Assigning an object's properties to an element's style object can be faster than using `style.setProperty()`, especially for complex style sets.
	* Pros: Fast, efficient, and flexible; allows setting multiple properties at once.
	* Cons: May require more boilerplate code, and can lead to errors if the object being assigned is not in the correct format.
5. **`setAttribute()`**: Setting the `style` attribute of an element as a string can be slower than other methods due to the overhead of serializing and deserializing the style information.
	* Pros: Convenient for setting simple styles, easy to read and write.
	* Cons: Slower than other methods; may not work correctly in all cases.

**Library usage:**

None of the test cases use a specific library beyond what is built-in to JavaScript (e.g., `Document` object).

**Special JS features or syntax:**

The benchmark does not explicitly use any special JavaScript features or syntax, but it does rely on some built-in browser-specific APIs and behaviors (e.g., parsing CSS styles, serializing style information). However, these are generally considered standard JavaScript behavior and do not require special knowledge to understand.

**Alternative approaches:**

Other approaches to setting CSS styles in JavaScript include:

* Using the `CSS` API (available in modern browsers) for more fine-grained control over styles.
* Using a library like jQuery or React's DOM manipulation APIs to simplify style management.
* Utilizing CSS-in-JS solutions, such as styled-components or Emotion, which allow declarative styling.

Keep in mind that these alternatives may not be directly comparable to the methods tested in this benchmark, as they often involve additional abstractions and complexities.

Related benchmarks:

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

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

Created: 3 years ago by: Guest

Jump to the latest result

style.setProperty

style.cssText

style

Object.assign

setAttribute

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months ago):