Benchmark: Rewrite multiple classes (className vs. setAttribute vs. classList)

HTML Preparation code:

<div id="foo" class="a b c"></div>

Tests:

className
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.className = "1 2 3"; }
setAttribute
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.setAttribute("class", "1 2 3"); }
classList
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.classList.remove(...element.classList); element.classList.add("1", "2", "3"); }

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 what's being tested in the provided JSON.

**Benchmark Definition**

The benchmark tests three approaches to rewriting class names on an HTML element:

1. `className`: Assigning the `class` attribute using dot notation (e.g., `element.className = "1 2 3"`).
2. `setAttribute`: Setting the `class` attribute using the `setAttribute` method (e.g., `element.setAttribute("class", "1 2 3")`).
3. `classList`: Using the `classList` property to add and remove classes (e.g., `element.classList.add("1", "2", "3"); element.classList.remove(...element.classList)`).

**Options Compared**

The benchmark compares the performance of these three approaches:

* **Pros and Cons:**
	+ `className`: This approach is concise and easy to read, but it may incur overhead due to string manipulation and attribute access.
	+ `setAttribute`: This method provides more control over the class name, as it allows setting individual classes. However, it may be slower due to the additional function call and argument passing.
	+ `classList`: This property offers a convenient way to manage multiple classes, but its performance might vary depending on the browser's implementation and the number of classes being added or removed.
* **Other Considerations:**
	+ The benchmark doesn't account for any potential security concerns related to class names, such as cross-site scripting (XSS).
	+ It also doesn't consider other factors like code readability, maintainability, or browser compatibility.

**Library and Special JS Features**

The benchmark uses no specific libraries, but it does rely on the `classList` property, which is a modern JavaScript feature introduced in HTML5. The `classList` property allows elements to dynamically manage their classes without having to manually set individual class names.

**Browser and Device Information**

The latest benchmark results show data from Firefox 119 running on Linux desktop platforms. The browsers' device information is not detailed, but the operating system is explicitly mentioned.

**Alternatives**

If you're interested in exploring alternative approaches or optimizing your code for better performance:

* Consider using a library like `classnames` to handle class management and reduce boilerplate code.
* Look into other modern JavaScript features, such as template literals (e.g., `element.classList.add(`${...}`)`) or the `classList.forEach()` method, which might provide alternative solutions.
* Keep in mind that browser compatibility is crucial; ensure your optimized code works across multiple browsers and devices.

Related benchmarks:

Rewrite multiple classes (className vs. setAttribute vs. classList) (version: 0)

Rewrite multiple classes className vs. setAttribute vs. classList

Comparing performance of: className vs setAttribute vs classList

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