Benchmark: className vs. setAttribute vs. classList

HTML Preparation code:

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

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
className
setAttribute
classList

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation.

The provided JSON represents a JavaScript microbenchmark that tests three different approaches to set a class on an HTML element: using `className`, `setAttribute`, and `classList`. Here's what each approach is tested, along with their pros and cons:

**1. Using `className`**
```javascript
element.className = "bar";
test = "bar" + i;
```
Pros:

* Simple and concise.
* Fast execution.

Cons:

* Can lead to slower performance if the class name is very long or has many spaces, as it requires more characters to be processed.
* Some older browsers may not support this method.

**2. Using `setAttribute`**
```javascript
element.setAttribute("class", "bar");
test = "bar" + i;
```
Pros:

* Works on all browsers that support HTML attributes.
* Can set multiple classes at once.

Cons:

* Requires an extra attribute to be added, which may lead to slower performance due to the increased number of characters being processed.
* May require additional processing to remove or update existing class names.

**3. Using `classList`**
```javascript
element.classList.add("bar");
test = "bar" + i;
```
Pros:

* Fast and efficient, as it only requires a single method call.
* Works on most modern browsers that support CSS classes.

Cons:

* Requires the addition of the `classList` property to be supported by the browser.
* May not work in older browsers or environments with limited CSS class support.

In this benchmark, each approach is tested with a large loop (1,000 iterations) and a dynamic class name generated based on the iteration number. The test results show that `classList` performs best, followed closely by `className`, while `setAttribute` has slower performance.

Now, let's take a look at the library used in this benchmark:

* There is no specific JavaScript library mentioned in the provided code or JSON.
* However, it's worth noting that some of these approaches may rely on additional libraries or polyfills for older browsers to support modern CSS class features.

As for special JS features or syntax, none are explicitly mentioned in the provided code or JSON.

Related benchmarks:

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

Comparing performance of: className vs setAttribute vs classList

Created: 8 years ago by: Guest

Jump to the latest result

className

setAttribute

classList

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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