Benchmark: 1 css var - style.setProperty vs style.cssText vs style vs Object.assign vs setAttribute

HTML Preparation code:

<div id="test"><div style="height: calc(var(--w, 1) * 1px); background-color:red;"></div></div>

Script Preparation code:

el = document.getElementById("test");
rn = ()=>Math.floor(10+Math.random(5));

Tests:

style.setProperty
let i = 0; while (i < 10000) { el.style.setProperty("--w", rn); i++; }
style.cssText
let i = 0; while (i < 10000) { el.style.cssText = `--w: ${rn()};`; i++; }
style
let i = 0; while (i < 10000) { el.style = `--w: ${rn()};`; i++; }
Object.assign
let i = 0; while (i < 10000) { Object.assign(el.style, { ['--w']: rn(), }); i++; }
setAttribute
let i = 0; while (i < 10000) { el.setAttribute('style',`--w: ${rn()};`); 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 month ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
style.setProperty	129.8 Ops/sec
style.cssText	170.0 Ops/sec
style	141.2 Ops/sec
Object.assign	417.9 Ops/sec
setAttribute	357.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON and explain what is being tested in each benchmark case.

**Benchmark Overview**

The test compares four different ways to set CSS variables (also known as custom properties) on an HTML element using JavaScript:

1. `style.setProperty()`
2. `style.cssText` (using template literals)
3. `style` (direct assignment)
4. `Object.assign()` with a style object
5. `setAttribute()` with the style attribute

**Library Used: None**

None of the benchmark cases use any external libraries, so we won't be discussing any additional dependencies.

**Special JS Features/Syntax: CSS Variables**

The test focuses on the new CSS variable feature introduced in CSS3, which allows you to define custom properties and reuse them across different stylesheets. The `--w` property is used as an example variable.

In JavaScript, these variables are accessed using the `style` object or its methods like `setProperty()`.

**Benchmark Preparation Code**

The provided code sets up a simple HTML structure with an element that will be used for testing. It also defines a script preparation function `rn()`, which generates a random integer between 1 and 10 (inclusive).

**Individual Test Cases**

Each test case is defined in the JSON array, with each object containing:

* `Benchmark Definition`: The JavaScript code that sets up the benchmark.
* `Test Name`: A descriptive name for the test case.

Here's a brief explanation of each test case:

1. `style.setProperty()`: Sets the `--w` CSS variable using `setProperty()`.
2. `style.cssText`: Sets the `--w` CSS variable by assigning a template literal to `cssText`.
3. `style`: Directly assigns the value of `rn()` to the `--w` property.
4. `Object.assign()`: Uses `Object.assign()` to merge an object with the existing style object, setting the `--w` property.
5. `setAttribute()`: Sets the `style` attribute using `setAttribute()`, passing a template literal that sets the `--w` value.

**Benchmark Results**

The provided benchmark results show the execution rate (Executions Per Second) for each test case on a Chrome Mobile 118 device with Android 10 operating system.

Here's a brief summary of the results:

* `Object.assign()` yields the highest execution rate, indicating that it is likely the fastest method.
* `setAttribute()` comes in second, suggesting that using the `style` attribute can be a viable alternative to other methods.
* The `style.cssText` and `style.setProperty()` methods have slightly lower execution rates, possibly due to parsing or syntax-related overhead.

**Pros and Cons**

Here's a brief summary of the pros and cons for each method:

1. `Object.assign()`: Pros: Efficient, easy to use. Cons: May require additional setup, e.g., creating a style object.
2. `setAttribute()`: Pros: Simple, straightforward. Cons: May not be as efficient as other methods, e.g., due to attribute parsing overhead.
3. `style.cssText` and `style.setProperty()`:
	* Pros: Easy to use, readable syntax.
	* Cons: May have performance overhead due to parsing or syntax-related issues.

**Alternatives**

Other alternatives for setting CSS variables include:

1. `DOMTokenList`: An API that allows you to manipulate the style attribute of an element using a more modern and efficient approach.
2. `CSSStyleRule` objects: You can use the `CSSStyleRule` object to create or modify a style rule, including setting custom properties.

Note that these alternatives may have slightly different performance characteristics and usage patterns compared to the methods tested in this benchmark.

Related benchmarks:

1 css var - style.setProperty vs style.cssText vs style vs Object.assign vs setAttribute (version: 0)

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

Created: 10 months 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):