Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
className vs. setAttribute vs. classList -- checking for class
(version: 0)
Comparing performance of:
className vs getAttribute vs classList
Created:
6 years ago
by:
Guest
Go to the latest result
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>
Run tests (3)
Previous results
Fork
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
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=589927" width="100%" height="500px"></iframe>
className
24K/s
getAttribute
11K/s
classList
5K/s
View exact numbers
Test name
Executions per second
✓
className
24,494 Ops/sec
getAttribute
11,370 Ops/sec
classList
4,909 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
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
Native JS classList versus Native JS getAttribute
classList.add vs setAttribute
DataAttribute vs Class Selector on body
setAttribute vs classList.add
Comments
Confirm delete:
Do you really want to delete benchmark?