Benchmark: className vs. setAttribute vs. classList vs array

HTML Preparation code:

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

Script Preparation code:

var arr=["class1", "class2", "class3", "class4", "class5"];
var element = document.getElementById("foo");

Tests:

1
element.className = "class1 class2 class3 class4 class5";
2
element.setAttribute("class", "class1 class2 class3 class4 class5");
3
for(let c of arr) element.classList.add(c);
4
element.classList.add(...arr);
5
element.classList.add( arr[0], arr[1], arr[2], arr[3], arr[4] );
6
let str = arr.join(' '); element.className = str;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
1
2
3
4
5
6

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's being tested.

**Benchmark Overview**

The benchmark compares four different ways to add classes to an HTML element: `className`, `setAttribute`, `classList.add()`, and using an array.

**What is being tested?**

In this benchmark, the test users are measuring the performance difference between:

1. Setting the `className` property of an element (e.g., `element.className = "class1 class2 class3 class4 class5"`).
2. Using the `setAttribute()` method to set a custom attribute on an element (e.g., `element.setAttribute("class", "class1 class2 class3 class4 class5")`).
3. Iterating over an array and adding classes to an element using the `classList.add()` method (e.g., `for(let c of arr) element.classList.add(c)`).
4. Using the `classList.add()` method with an array (e.g., `element.classList.add(...arr)`).

**Options compared**

The four options are compared in terms of their performance, which is measured by the number of executions per second.

**Pros and Cons of each approach:**

1. **`className`**: This is the most straightforward way to add classes to an element. However, it can lead to namespace pollution if not used carefully.
	* Pros: Simple, efficient.
	* Cons: Can lead to namespace issues.
2. **`setAttribute()`**: This method sets a custom attribute on an element, which can be useful in certain scenarios.
	* Pros: Allows for more flexibility in class naming conventions.
	* Cons: May not be as efficient as other methods and can lead to unnecessary attribute creation.
3. **`classList.add()` with array iteration**: This approach iterates over the array and adds each class individually using `classList.add()`.
	* Pros: More explicit and controlled than setting a single string value.
	* Cons: Can be slower due to the iteration.
4. **`classList.add()` with an array**: This method passes an array of classes to be added at once, which can be more efficient than individual iterations.
	* Pros: Efficient, easy to read.
	* Cons: May not be as flexible as individual class additions.

**Library and syntax**

The benchmark uses the following library:
None

It also uses a special JavaScript feature:
`...` (spread operator) in `element.classList.add(...arr)` for passing an array of classes.

**Other considerations**

When choosing between these methods, consider factors such as:

* Performance: How many executions per second are you targeting?
* Flexibility: Do you need to support different class naming conventions?
* Readability: How important is code readability in your specific use case?

**Alternatives**

If you're interested in exploring alternative approaches, here are a few options:

1. Using `classList.toggle()` instead of `classList.add()`.
2. Using `element.classList.replace()` to remove and replace classes.
3. Implementing your own custom class management system.

Keep in mind that these alternatives may have different performance characteristics or trade-offs compared to the methods being tested in this benchmark.

Related benchmarks:

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

Comparing performance of: 1 vs 2 vs 3 vs 4 vs 5 vs 6

Created: 3 years ago by: Guest

Jump to the latest result

1

2

3

4

5

6

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