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 bar1 bar2 bar3 bar4"; }
classList
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.classList.add("bar"); element.classList.add("bar1"); element.classList.add("bar2"); element.classList.add("bar3"); element.classList.add("bar4"); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
className
classList

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 5 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:144.0) Gecko/20100101 Firefox/144.0

Browser/OS: Firefox 144 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
className	26628.4 Ops/sec
classList	1233.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what is being tested in the provided benchmark.

The benchmark compares three approaches to adding classes to an HTML element:

1. `className`: This approach sets the entire class name of the element as a single string, e.g., `"bar bar1 bar2 bar3 bar4"`. This is done using the assignment operator (`=`).
2. `setAttribute`: This approach uses the `setAttribute` method to set individual class names one by one, e.g., `element.setAttribute('class', 'bar');`, `element.setAttribute('class', 'bar1');`, and so on.
3. `classList`: This approach uses the `classList` property of the element to add multiple classes at once, e.g., `element.classList.add('bar');`, `element.classList.add('bar1');`, and so on.

**Pros and Cons:**

* **className**: This approach can be faster for small numbers of classes, as it only requires a single assignment. However, it's slower when dealing with large numbers of classes, as the entire class name needs to be parsed and processed.
* `setAttribute`: This approach is generally slower than using the `classList` property, as each individual setAttribute call incurs additional overhead. However, it can still be faster for small sets of classes.
* `classList`: This approach is usually the fastest, as it uses a optimized internal data structure to store and manage the class names.

**Other Considerations:**

* The benchmark doesn't account for any potential side effects or changes to the element's DOM tree when using these approaches. For example, setting multiple classes at once might affect the element's layout or positioning.
* It's worth noting that the `classList` property is a relatively new feature in JavaScript (introduced in ECMAScript 2015), and its implementation may vary across different browsers.

**Library/Features Used:**

None are explicitly mentioned in the benchmark definition, but some assumptions can be made:

* The `document.getElementById` method is used to retrieve an element by its ID.
* The `Element` object has a `className` property, `setAttribute` method, and `classList` property.

If you're using modern JavaScript versions, the `classList` property is supported natively in most browsers. If not, you may need to polyfill or use a third-party library to achieve similar behavior.

**Alternative Approaches:**

Other approaches to adding classes to an element could include:

* Using a CSS class list and manipulating it with JavaScript (e.g., using the `addRule` method of the `CSSStyleSheet` object).
* Using a custom DOM implementation that allows for more fine-grained control over class management.
* Using a library or framework that provides a more optimized way to manage classes, such as React's class names system.

Related benchmarks:

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

Comparing performance of: className vs classList

Created: 9 years ago by: Guest

Jump to the latest result

className

classList

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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