Benchmark: className vs. getAttribute vs. classList

HTML Preparation code:

<div id="foo" class="c1 c2 c3"></div>

Tests:

className
var element = document.getElementById("foo"); var i = 500; while (i--) { var z = element.className.split(/\s+/); var x = []; for (j = 0; j < z.length; j++) { x.push(z[j]); } }
setAttribute
var element = document.getElementById("foo"); var i = 500; while (i--) { var z = element.getAttribute('class').split(/\s+/); var x = []; for (j = 0; j < z.length; j++) { x.push(z[j]); } }
classList
var element = document.getElementById("foo"); var i = 500; while (i--) { var x = []; for (j = 0; j < element.classList.length; j++) { x.push(element.classList[j]); } }

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: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
className	4790.8 Ops/sec
setAttribute	4059.6 Ops/sec
classList	3266.8 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 this benchmark and compare the different approaches.

**Benchmark Context**

The benchmark tests three ways to iterate over the classes of an HTML element: using `className`, `getAttribute('class')`, and `classList`. The test aims to determine which approach is faster, with a focus on the browser's performance under heavy load (500 executions per second).

**Test Case Breakdown**

1. **`className`**: This test case uses the `split()` method on the `element.className` property to split the classes into an array. It then iterates over this array using a traditional `for` loop.
2. **`setAttribute`**: This test case uses the `getAttribute('class')` method to retrieve the value of the `class` attribute, splits it into an array using `split()`, and then iterates over the resulting array in the same way as the previous test case.
3. **`classList`**: This test case directly accesses the `element.classList` property, which returns a live HTMLCollection containing the classes. It then uses a traditional `for` loop to iterate over this collection.

**Comparison of Approaches**

* **`className` vs. `setAttribute`**: Both approaches use the same technique (splitting the class string into an array). However, `getAttribute('class')` might be slower due to the overhead of retrieving an attribute value and parsing it.
	+ Pros: Simple and straightforward implementation.
	+ Cons: Might be slower than `classList`.
* **`className` vs. `classList`**: `classList` provides a more modern and efficient way to access classes, as it returns a live collection that updates automatically when the element's class list changes.
	+ Pros: Faster and more memory-efficient than using `split()` on the class string.
	+ Cons: Requires support for the `classList` property in the browser.
* **`setAttribute` vs. `classList`**: As mentioned earlier, `getAttribute('class')` might be slower due to its overhead. However, this test case doesn't provide enough information about the actual execution times to make a definitive conclusion.
	+ Pros: None apparent.
	+ Cons: Might be slower than `classList`.

**Other Considerations**

* **Browser support**: The `classList` property is supported in modern browsers (Chrome 123 and above). Older browsers might not support it, which could skew the results.
* **Element type**: The benchmark only tests HTML elements. Other types of elements (e.g., iframe or img) may have different class list behavior.

**Alternatives**

Other alternatives to access classes include:

1. `classList.toggle()`: Used with `addEventListener('classlistchange')`, this method allows you to add and remove classes from the element's class list.
2. CSS classes: Using CSS classes can be an alternative to accessing classes using JavaScript. However, this approach requires setting up a separate CSS file or modifying the HTML structure.

In conclusion, the benchmark results suggest that `classList` is the fastest approach for iterating over elements' classes, due to its live collection and automatic updates. However, browser support and element type can affect the outcome, so it's essential to consider these factors when choosing an approach.

Related benchmarks:

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

Comparing performance of: className vs setAttribute vs classList

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