Benchmark: className vs. setAttribute vs. classListasdfa

HTML Preparation code:

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

Tests:

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

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: 2 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36

Browser/OS: Chrome 119 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
className	16663.9 Ops/sec
setAttribute	10166.7 Ops/sec
classList	2353.8 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark measures the performance difference between three approaches to add or modify CSS classes on an HTML element:

1. `className`
2. `setAttribute` (specifically, setting the `class` attribute)
3. `classList`

These methods are used to dynamically update the class names of an HTML element.

**Options Comparison**

The benchmark compares these three approaches for two reasons:

* **Performance**: How quickly can each approach be executed? The goal is to determine which method has the best performance in terms of time.
* **Readability and Maintainability**: How easy is it to understand and maintain the code that uses each approach?

**Pros and Cons**

1. **className**
	* Pros: Simple, readable, and well-supported by modern browsers.
	* Cons: May not work as expected in older browsers or with certain CSS rules (e.g., `!important`).
2. **setAttribute**
	* Pros: Works consistently across all browsers, including legacy ones.
	* Cons: Can be less readable than other methods, especially when dealing with multiple classes.
3. **classList**
	* Pros: Modern and concise way to manage class names, widely supported by modern browsers.
	* Cons: May not work in older browsers or with specific CSS rules.

**Library Usage**

None of the provided benchmark cases use any external libraries. However, it's worth noting that `classList` is a part of the ECMAScript standard (ES6+), making it a more modern and consistent approach.

**Special JS Features or Syntax**

The benchmark uses ES6 features, specifically:

* `const` keyword for variable declarations.
* Template literals (`\r\n`) for string interpolation.

These features are widely supported by modern browsers but may not be compatible with older browsers.

**Other Alternatives**

Alternative approaches to add or modify CSS classes on an HTML element include:

* **DOM manipulation**: Directly modifying the `className` attribute using a loop, like in the `setAttribute` case.
* **CSS classes with inline styles**: Using the `style` attribute to set CSS classes and their properties directly on the element.
* **MutationObserver**: Observing changes to the DOM and reacting to class name changes.

Each of these alternatives has its pros and cons, and may be suitable for specific use cases or performance-critical code.

Related benchmarks:

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

Comparing performance of: className vs setAttribute vs classList

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