Benchmark: className vs. setAttribute vs. classList -- checking for class

HTML Preparation code:

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

Tests:

className
var element = document.getElementById("foo"); var i = 10000; while (i--) { const isFooClass = element.className.includes("foo"); }
getAttribute
var element = document.getElementById("foo"); var i = 10000; while (i--) { var isFooClass = element.getAttribute("class") === "foo"; }
classList
var element = document.getElementById("foo"); var i = 10000; while (i--) { var isFooClass = element.classList.contains("foo"); }

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:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36

Browser/OS: Chrome 133 on Linux

View result in a separate tab

Test name	Executions per second
className	24494.3 Ops/sec
getAttribute	11370.2 Ops/sec
classList	4908.6 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided benchmark measures the performance of three different approaches to check if an HTML element has a specific class:

1. `className`: This approach uses the `includes()` method to search for the class name in the `className` property of the element.
2. `getAttribute`: This approach uses the `getAttribute()` method to retrieve the value of the `class` attribute and then checks if it equals the class name.
3. `classList`: This approach uses the `contains()` method of the `classList` property to check if the class name is present in the list of classes.

Here are some pros and cons of each approach:

**className**

Pros:

* Simple and easy to implement
* Works for most modern browsers

Cons:

* Can be slow for large numbers of elements or complex class names (due to the `includes()` method's time complexity)
* May not work as expected if the class name is prefixed with a namespace (e.g., `.foo-`)

**getAttribute**

Pros:

* Fast and efficient, as it directly accesses the attribute value
* Works for all browsers, including older ones

Cons:

* Requires an additional function call to get the attribute value
* May not work as expected if the class name is part of a namespace (e.g., `.foo-`)

**classList**

Pros:

* Fast and efficient, as it directly accesses the list of classes
* Works for all browsers that support the `classList` property

Cons:

* Requires modern browser support (Chrome 77+ in this benchmark)
* May not work as expected if the class name is part of a namespace or has leading/trailing whitespace

The choice of approach depends on the specific requirements and constraints of the project. If performance is critical and compatibility with older browsers is not a concern, `getAttribute` might be the best option. However, for most modern web applications, `classList` is likely to be the fastest and most efficient way to check for class presence.

In this benchmark, `classList` appears to be the slowest approach, but it's still faster than `className` due to its direct access to the list of classes. The difference in performance between `getAttribute` and `classList` is relatively small, likely due to Chrome 77's optimization for this specific use case.

Other alternatives to consider:

* Using a CSS selector (e.g., `.foo`) instead of checking class presence directly
* Using a library or utility function that provides a faster and more efficient way to check class presence (e.g., jQuery's `hasClass()` method)
* Optimizing the HTML structure and layout to reduce the number of elements with specific classes

Related benchmarks:

className vs. setAttribute vs. classList -- checking for class (version: 0)

Comparing performance of: className vs getAttribute vs classList

Created: 6 years ago by: Guest

Jump to the latest result

className

getAttribute

classList

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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