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'; }

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

className

22K/s

setAttribute

18K/s

classList

9K/s

dataset

6K/s

Fastest: className (3.5x faster)

View exact numbers

✓ className: 22,376 ops/sec
• setAttribute: 18,321 ops/sec
• classList: 8,632 ops/sec
• dataset: 6,441 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: 2 months ago)

User agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36 Edg/109.0.1518.140

Browser/OS: Chrome 109 on Windows 7

View result in a separate tab

className

2K/s

classList

827/s

setAttribute

816/s

dataset

684/s

View exact numbers

Test name	Executions per second
✓ className	1,572 Ops/sec
classList	827 Ops/sec
setAttribute	816 Ops/sec
dataset	684 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!

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

Comparing performance of: `className vs setAttribute vs classList vs dataset`

Created: 3 years ago by: Guest

Go to the latest result

className

setAttribute

classList

dataset

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

Comparing performance of: className vs setAttribute vs classList vs dataset

Created: 3 years ago by: Guest

Go to the latest result

className

setAttribute

classList

dataset

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `className vs setAttribute vs classList vs dataset`