Benchmark: className vs. getAttribute vs. classList v

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
className
getAttribute
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.

**Benchmark Overview**

The provided benchmark measures the performance of three different approaches to retrieve and manipulate class names in JavaScript: `className`, `getAttribute`, and `classList`.

**Approaches Compared**

1. **`className`**: This approach uses the `split()` method on the `element.className` string, which splits the string into an array of class names separated by spaces.
2. **`getAttribute`**: This approach uses the `getAttribute('class')` method to retrieve the value of the `class` attribute as a string, and then splits it into an array of class names using the same `split()` method.
3. **`classList`**: This approach directly accesses the `classList` property of the element, which returns a live HTMLCollection of class names.

**Pros and Cons**

* **`className`**:
	+ Pros: Simple and widely supported (older browsers).
	+ Cons: May not be as efficient as other approaches, especially for large number of classes.
* **`getAttribute`**:
	+ Pros: Widely supported (older browsers) and easy to use.
	+ Cons: Requires an extra method call and may not be as efficient as other approaches.
* **`classList`**:
	+ Pros: Efficient, modern, and widely supported (modern browsers).
	+ Cons: May not work in older browsers.

**Library/Utility Used**

None of the above methods rely on any external libraries or utilities. However, it's worth noting that `classList` is a relatively new feature introduced in HTML5, so its availability may depend on the browser version and platform.

**Special JS Feature/Syntax**

The use of template literals (e.g., `"\\s+"`) in the benchmark definitions is not specific to any particular JavaScript feature or syntax. It's simply a way to concatenate strings with spaces using a regular expression as a separator.

**Other Alternatives**

If you need to achieve similar results, other approaches might include:

* Using `getComputedStyle()` method to retrieve the computed style of an element and then parsing its `class` property.
* Utilizing CSS classes and DOM manipulation to achieve the desired result.

Keep in mind that these alternatives may have different performance characteristics or requirements depending on your specific use case.

Related benchmarks:

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

Comparing performance of: className vs getAttribute vs classList

Created: 7 years ago by: Guest

Jump to the latest result

className

getAttribute

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