Benchmark: className vs. setAttribute vs. classList

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"); }

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:

Run details: (Test run date: 28 days ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 146 on Android

View result in a separate tab

Test name	Executions per second
className	8069.1 Ops/sec
setAttribute	5813.8 Ops/sec
classList	2594.6 Ops/sec

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, the options being compared, their pros and cons, and other considerations.

**Benchmark Overview**

The benchmark measures the performance difference between three ways to set or update the `class` attribute of an HTML element: using the `className` property, the `setAttribute` method, and the `classList` API (part of the DOM Standard).

**Test Cases**

Each test case represents a specific scenario:

1. **className**: Sets the `class` attribute directly using the `element.className = "bar"` syntax.
2. **setAttribute**: Sets the `class` attribute using the `element.setAttribute("class", "bar")` method.
3. **classList**: Adds or updates the `class` attribute using the `element.classList.add("bar")` API.

**Library and Syntax Considerations**

The benchmark uses a mix of:

* Vanilla JavaScript (no libraries)
* DOM Standard (`classList` API)

The `classList` API is a part of the DOM Standard, which provides a way to manage classes in a more modern and efficient manner. It's supported by most modern browsers.

**Options Being Compared**

The three options being compared are:

1. **className**: Directly setting the `class` attribute using the property syntax.
	* Pros: Simple, widely supported, and often used in legacy code.
	* Cons: May not be as efficient or flexible as other methods.
2. **setAttribute**: Setting the `class` attribute using the `setAttribute` method.
	* Pros: More versatile than `className`, allows for setting multiple attributes at once.
	* Cons: May be slower due to the additional overhead of the `setAttribute` method.
3. **classList**: Using the `classList` API to manage classes.
	* Pros: Efficient, modern, and flexible; provides a way to add, remove, or toggle classes.
	* Cons: May not work in older browsers that don't support the DOM Standard.

**Other Considerations**

When choosing between these options, consider the following:

* **Legacy code**: If working with existing legacy code that uses `className`, you may want to stick with it for compatibility reasons. However, if possible, consider refactoring to use more modern and efficient methods like `classList`.
* **Performance**: In general, using the `classList` API is likely to be faster and more efficient than setting the `class` attribute directly or using the `setAttribute` method.
* **Flexibility**: If you need to set multiple attributes at once or perform class-related operations, `setAttribute` might be a better choice.

**Alternatives**

Other alternatives for managing classes in HTML elements include:

* Using a CSS class selector (e.g., `.class-name`) and applying it using the `classList.toggle()` method.
* Implementing custom solutions using JavaScript events or other mechanisms.

Keep in mind that these alternatives may have different trade-offs in terms of performance, flexibility, and compatibility.

Related benchmarks:

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

Comparing performance of: className vs setAttribute vs classList

Created: 9 years ago by: Guest

Jump to the latest result

className

setAttribute

classList

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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