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

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;";
Object.assign
Object.assign(el.style, { height: '1vh', width: '1vw', color: 'red', border: '1vmin solid red', backgroundColor: 'black', padding: '0.5vmin' });
setAttribute
el.setAttribute('style',"color:red;border:1vmin solid red;padding:0.5vmin;background-color:black;height:1vh;width:1vw;");

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/126.0.0.0 Safari/537.36

Browser/OS: Chrome 126 on Windows

View result in a separate tab

Test name	Executions per second
style.setProperty	216320.3 Ops/sec
style.cssText	317483.4 Ops/sec
style	329686.4 Ops/sec
Object.assign	255346.8 Ops/sec
setAttribute	1727193.2 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided JSON represents a JavaScript benchmarking test, specifically testing different methods for setting CSS properties on an HTML element.

**Benchmarked Options:**

1. `style.setProperty()`
2. `style.cssText`
3. Direct assignment to `style` object
4. Using `Object.assign()` to set style properties
5. Setting the `style` attribute using `setAttribute()`

**Comparison of Approaches:**

* **Performance:** The test results show that setting CSS properties using `style.setProperty()` is the fastest method, followed closely by direct assignment to the `style` object and then by the other methods.
	+ Pros: `style.setProperty()` allows for more fine-grained control over property names, values, and units. Direct assignment can be faster since it avoids the overhead of function calls and property name lookups.
	+ Cons: `style.setProperty()` requires more code to set multiple properties, which might lead to slower initial execution times due to parsing and compilation. Direct assignment can be less readable for complex styles.
* **Readability:** Using `style.cssText` is often considered the most readable option, as it clearly separates style declarations from other element properties.
	+ Pros: Easy to understand and implement, especially for simple styles.
	+ Cons: May not work well with more complex styles or when multiple values need to be set.
* **Flexibility:** `Object.assign()` offers flexibility in setting style properties, but its usage might make the code less readable.
	+ Pros: Allows for easy addition of new style properties without modifying existing code.
	+ Cons: Can lead to more complex and harder-to-understand code.

**Library Usage:**

The test uses the built-in `style` property of HTML elements, which is not a library in itself. However, if you consider JavaScript engines or browsers as libraries, then they provide their own implementations of the `style` API, including `setProperty()` and other related methods.

**Special JS Features/Syntax:**

None are explicitly mentioned or used in this benchmark.

**Alternatives:**

1. **CSSOM:** CSSOM (CSS Object Model) is a W3C standard that provides an object-based interface for accessing and manipulating CSS stylesheets. While not directly applicable to this benchmark, it's worth noting as an alternative approach.
2. **Styling APIs:** Some browsers provide additional styling APIs or modules, like Web Components' `custom-element` module, which offer more advanced styling options.
3. **Pre-processor tools:** Tools like Sass, Less, or PostCSS can be used to preprocess and generate CSS styles, which might affect the performance of style property setting.

Keep in mind that this benchmark focuses on the performance differences between various methods for setting CSS properties on an HTML element, rather than exploring alternative styling approaches.

Related benchmarks:

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

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

Created: one year ago by: Registered User

Jump to the latest result

style.setProperty

style.cssText

style

Object.assign

setAttribute

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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