Benchmark: className vs. setAttribute vs. classList vs. dataset v2

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
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.classList.add("bar"); }
dataset
var element = document.getElementsByTagName("div")[0]; var i = 1000; while (i--) { element.dataset.foo = 'bar'; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
className
setAttribute
classList
dataset

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:109.0) Gecko/20100101 Firefox/115.0

Browser/OS: Firefox 115 on Windows 7

View result in a separate tab

Test name	Executions per second
className	1632.0 Ops/sec
setAttribute	1522.9 Ops/sec
classList	1100.8 Ops/sec
dataset	2427.2 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The provided benchmark compares four different approaches for setting the class, attribute, list, or dataset of an HTML element: `className`, `setAttribute`, `classList`, and `dataset`. We'll break down each test case, discuss the pros and cons of each approach, and explore other alternatives.

**Test Cases**

There are four test cases:

1. **`className`**: Sets the class attribute of an element using the `className` property.
```javascript
var element = document.getElementById("foo");
var i = 1000;
while (i--) {
  element.className = "bar";
}
```
2. **`setAttribute`**: Sets the class attribute of an element using the `setAttribute` method.
```javascript
var element = document.getElementById("foo");
var i = 1000;
while (i--) {
  element.setAttribute("class", "bar");
}
```
3. **`classList`**: Adds a class to an element using the `classList.add` method.
```javascript
var element = document.getElementById("foo");
var i = 1000;
while (i--) {
  element.classList.add("bar");
}
```
4. **`dataset`**: Sets a dataset attribute of an element using the `dataset` property.
```javascript
var element = document.getElementsByTagName("div")[0];
var i = 1000;
while (i--) {
  element.dataset.foo = 'bar';
}
```

**Approaches Compared**

The four approaches are compared in terms of:

* **Performance**: The number of executions per second.
* **Readability**: The simplicity and ease of understanding the code.

**Pros and Cons**

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

1. **`className`**:
	* Pros: Simple, easy to read.
	* Cons: May not be supported in older browsers or environments.
2. **`setAttribute`**:
	* Pros: Widely supported, can set multiple attributes at once.
	* Cons: Less readable than other approaches.
3. **`classList`**:
	* Pros: Modern and widely supported, easy to use for class-based styling.
	* Cons: Requires modern JavaScript and HTML5 features.
4. **`dataset`**:
	* Pros: Simple, easy to read, and suitable for key-value pairs.
	* Cons: May not be as well-supported in older browsers or environments.

**Other Alternatives**

Other alternatives for setting class attributes include:

* `style`: Setting CSS styles directly on the element using the `style` attribute. (Not tested in this benchmark.)
* `classList.toggle`: Using the `classList.toggle` method to toggle classes on and off. (Not tested in this benchmark.)

In general, when choosing an approach, consider factors such as:

* **Browser support**: Ensure the approach is supported by the target browsers.
* **Readability**: Choose an approach that is easy to understand and maintain.
* **Performance**: Optimize for performance if needed.

I hope this explanation helps you understand the benchmark and the different approaches compared!

Related benchmarks:

className vs. setAttribute vs. classList vs. dataset v2 (version: 0)

Comparing performance of: className vs setAttribute vs classList vs dataset

Created: 2 years ago by: Guest

Jump to the latest result

className

setAttribute

classList

dataset

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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