Benchmark: className vs. setAttribute() vs. classList.add() vs classList.value

HTML Preparation code:

<div id="foo"></div>

Tests:

className
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.className = "bar"; }
setAttribute()
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.setAttribute("class", "bar"); }
classList.add()
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.classList.add("bar"); }
classList.value
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.classList.value = "bar"; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
className
setAttribute()
classList.add()
classList.value

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 81 on Windows

View result in a separate tab

Test name	Executions per second
className	2750.2 Ops/sec
setAttribute()	1717.7 Ops/sec
classList.add()	1782.9 Ops/sec
classList.value	2713.4 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the provided benchmark and explain what's being tested, compared options, pros/cons of each approach, library usage, special JS features or syntax, and alternatives.

**Benchmark Definition**

The provided JSON represents a JavaScript microbenchmark on MeasureThat.net. The benchmark tests four different approaches for setting a CSS class on an HTML element:

1. `className`
2. `setAttribute("class", "bar")`
3. `classList.add("bar")`
4. `classList.value = "bar"`

**Options Compared**

The options being compared are:

* **`className`**: Using the dot notation to set a CSS class directly on the element.
* **`setAttribute("class", "bar")`**: Using the `setAttribute()` method to set a custom attribute on the element and then parsing it as a CSS class.
* **`classList.add("bar")`**: Using the `classList` property to add a CSS class to the element.
* **`classList.value = "bar"`**: This approach is not valid, as `classList` does not have a `value` property. It's likely a mistake or an invalid test case.

**Pros and Cons**

1. **`className`**:
	* Pros: Simple and efficient.
	* Cons: May be slower due to the repeated dot notation calls.
2. **`setAttribute("class", "bar")`**:
	* Pros: Can set multiple classes at once.
	* Cons: May be slower due to parsing the attribute value as a CSS class, which can lead to slower performance on modern browsers.
3. **`classList.add("bar")`**:
	* Pros: Efficient and concise.
	* Cons: Requires support for the `classList` property, which may not be available in older browsers.

**Library Usage**

None of the test cases use a specific JavaScript library. However, some modern browsers have introduced new APIs that might affect performance, such as WebAssembly (WASM) or CSS Grid/Flexbox.

**Special JS Features or Syntax**

There is no special JavaScript feature or syntax used in these benchmark definitions. The focus is on comparing different approaches for setting a CSS class.

**Alternatives**

If you want to compare alternative approaches, you could consider adding test cases for:

* Using `style` property instead of `className`: `element.style.backgroundColor = "bar";`
* Using `DOMTokenList` API: `element.style.classList.add("bar");`
* Using a library like jQuery or Lodash
* Using a CSS-in-JS solution like styled-components or Emotion

Keep in mind that these alternative approaches might introduce additional complexity and may not be representative of real-world use cases.

For the provided benchmark, it's essential to note that the `classList.value` approach is invalid, so it's best to remove this test case or replace it with a valid alternative.

Related benchmarks:

className vs. setAttribute() vs. classList.add() vs classList.value (version: 0)

Comparing performance of: className vs setAttribute() vs classList.add() vs classList.value

Created: 4 years ago by: Guest

Jump to the latest result

className

setAttribute()

classList.add()

classList.value

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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