Benchmark: SetProperty vs CSSStyleSheet

Script Preparation code:

count = 10000;
names = new Array(count).fill(0).map((_, index) => "--foobar-" + index);

Tests:

SetProperty
names.forEach(name => document.body.style.setProperty(name, "12px"));
CSSStyleSheet
const sheet = new CSSStyleSheet; const data = names.reduce((name, accum) => {accum += name + ": 12px;"}, ""); sheet.replaceSync(":root {" + data + "}"); document.addoptedStyleSheets = [sheet]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
SetProperty
CSSStyleSheet

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

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

Browser/OS: Safari 17 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
SetProperty	1.5 Ops/sec
CSSStyleSheet	5572.3 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON and explain what is tested on MeasureThat.net.

**Benchmark Definition**

The benchmark definition represents a comparison between two approaches: setting CSS styles using the `setProperty` method (intrinsic to HTML elements) versus creating a `CSSStyleSheet` and using it to set styles.

**Options Compared**

There are two options compared:

1. **SetProperty**: This approach uses the `setProperty` method directly on the `document.body.style`. It's a concise way to set CSS properties, but its performance might be affected by various factors, such as browser optimizations or DOM manipulation.
2. **CSSStyleSheet**: This approach creates a new `CSSStyleSheet` object and appends it to the `document.addoptedStyleSheets` array. This method provides more control over the styling process, allowing for easier modification of stylesheets.

**Pros and Cons**

1. **SetProperty**
	* Pros: Concise, easy to use.
	* Cons:
		+ Performance might be affected by browser optimizations or DOM manipulation.
		+ Less control over styling processes.
2. **CSSStyleSheet**
	* Pros:
		+ More control over styling processes.
		+ Easier modification of stylesheets.
	* Cons: Requires more code and setup.

**Other Considerations**

1. **Library**: The `CSSStyleSheet` approach relies on the `cssom` library, which provides a way to access and manipulate CSS stylesheets programmatically.
2. **Special JS Feature/Syntax**: There is no special JavaScript feature or syntax used in this benchmark. Both approaches are standard DOM-based methods.

**Alternatives**

If you're interested in exploring alternative approaches, consider the following:

1. **CSSOM** (CSS Object Model): This API provides a more comprehensive way to interact with CSS stylesheets, but it might have higher performance overhead compared to `setProperty`.
2. **Web APIs**: Other web APIs, like `window.CSS`, provide similar functionality to `CSSStyleSheet` but might be less compatible across browsers.

In summary, the benchmark compares two approaches for setting CSS styles: a concise but potentially performance-affected method (`setProperty`) versus a more controlled but code-intensive approach (`CSSStyleSheet`). Understanding the pros and cons of each option can help developers choose the best approach for their specific use cases.

Related benchmarks:

SetProperty vs CSSStyleSheet (version: 0)

Comparing performance of: SetProperty vs CSSStyleSheet

Created: 2 years ago by: Guest

Jump to the latest result

SetProperty

CSSStyleSheet

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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