Benchmark: className vs. setAttribute vs. classList

HTML Preparation code:

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

Tests:

className
var element = document.getElementById("foo"); var i = 10; while (i--) { element.className += " bar"+i; }
setAttribute
var element = document.getElementById("foo"); var i = 10; while (i--) { element.setAttribute("class", element.getAttribute("class") + " bar"+i); }
classList
var element = document.getElementById("foo"); var i = 10; while (i--) { element.classList.add("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 break down the provided benchmark and explain what is being tested, compared, and their pros and cons.

**Benchmark Overview**

The test compares three approaches to dynamically add or modify class names on an HTML element:

1. `className` property
2. `setAttribute` method with string concatenation
3. `classList` API

**Test Case 1: `className` Property**

In this test case, the benchmark creates a while loop that appends classes to the element's `className` property using string concatenation.

```javascript
var element = document.getElementById("foo");
var i = 10;
while (i--) {
    element.className += " bar" + i;
}
```

**Pros:**

* Simple and straightforward approach.
* No additional library or API required.

**Cons:**

* String concatenation can lead to performance issues due to the creation of a new string object on each iteration.
* The resulting class name may not be as readable or maintainable as other approaches.

**Test Case 2: `setAttribute` Method with String Concatenation**

In this test case, the benchmark uses the `setAttribute` method to dynamically set the `class` attribute on the element. The same string concatenation approach is used as in the previous test case.

```javascript
var element = document.getElementById("foo");
var i = 10;
while (i--) {
    element.setAttribute("class", element.getAttribute("class") + " bar" + i);
}
```

**Pros:**

* Uses a more traditional and widely supported approach for setting attributes.
* Does not rely on the `className` property.

**Cons:**

* String concatenation can lead to performance issues, just like in the previous test case.
* May not be as readable or maintainable as other approaches.

**Test Case 3: `classList` API**

In this test case, the benchmark uses the `classList` API to add classes to the element.

```javascript
var element = document.getElementById("foo");
var i = 10;
while (i--) {
    element.classList.add("bar" + i);
}
```

**Pros:**

* Most efficient and performant approach.
* Provides a more modern and readable way of managing class names.
* Does not rely on string concatenation or attribute setting.

**Cons:**

* Requires the `classList` API, which may not be supported in older browsers.

**Library Used:**

The `classList` API is part of the W3C Standardized API. It provides a more modern and efficient way to manage class names compared to traditional approaches like string concatenation or attribute setting.

**Special JS Feature/Syntax:**

None of these test cases use any special JavaScript features or syntax, such as ES6 syntax or async/await.

**Other Alternatives:**

If you need to add classes to an element, other alternatives include:

* Using a CSS class list and manipulating it with JavaScript
* Using a library like jQuery or Lodash that provides utility functions for managing class names

Keep in mind that the choice of approach depends on the specific requirements and constraints of your project.

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):