Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
className vs. getAttribute vs. classList 3
(version: 0)
Benchmark.js
Comparing performance of:
hasAttribute vs classList vs getAtttr
Created:
2 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div id="foo" class="wl" wl='true'></div>
Tests:
hasAttribute
var element = document.getElementById("foo"); var i = 500; while (i--) { console.log(element.hasAttribute('wl')); }
classList
var element = document.getElementById("foo"); var i = 500; while (i--) { console.log(element.classList.contains('wl')); }
getAtttr
var element = document.getElementById("foo"); var i = 500; while (i--) { console.log(element.getAttribute('wl') === 'true'); }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
hasAttribute
classList
getAtttr
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36
Browser/OS:
Chrome 109 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=531202" width="100%" height="500px"></iframe>
hasAttribute
213/s
getAtttr
211/s
classList
207/s
View exact numbers
Test name
Executions per second
✓
hasAttribute
213 Ops/sec
getAtttr
211 Ops/sec
classList
207 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
I'll break down the provided benchmark and its components to explain what's being tested, compared, and their pros/cons. **Benchmark Overview** The test is designed to compare three approaches for checking if an element has a specific attribute: `hasAttribute`, `classList.contains()`, and `getAttribute()` with a comparison operator (`=== 'true'`). **Test Cases** Each test case consists of two parts: 1. **Script Preparation Code**: A JavaScript snippet that prepares the environment for the benchmark. 2. **Html Preparation Code**: An HTML fragment that defines an element to be tested. The script preparation code creates an element with the class `wl` and sets its `wl` attribute to `'true'`. The while loop runs 500 times, printing the result of each test in sequence. **Test Case Breakdown** 1. **hasAttribute** * This test checks if the element has the `wl` attribute using the `hasAttribute()` method. * Pros: Simple and efficient, as it only requires a single function call. * Cons: May be slower due to additional processing overhead. 2. **classList.contains()** * This test uses the `classList` property to check if the element contains the class `'wl'`. * Pros: More readable and maintainable, as it's built into the DOM API. * Cons: May be slower for large datasets or complex class names. 3. **getAttribute()` with comparison operator * This test uses the `getAttribute()` method to retrieve the value of the `wl` attribute and compares it to `'true'`. * Pros: Can provide more accurate results, as it returns the actual attribute value rather than just presence. * Cons: Requires an additional function call and potential string comparison. **Library** None **Special JS Feature/Syntax** None mentioned in this explanation. However, note that `classList` is a modern JavaScript feature introduced in ECMAScript 2015 (ES6). If the benchmark were run on older browsers or environments, this might be an issue. **Other Alternatives** In addition to these three approaches, other methods for checking attribute presence include: * Using a regular expression (`/wl/i`) to search for the class name * Using `document.querySelector()` with a CSS selector (`[class^="wl"]`) * Implementing a custom function to check attribute presence Keep in mind that each alternative approach has its own trade-offs and may not be suitable for all use cases.
Related benchmarks
className vs. setAttribute vs. classList
classList.contains vs. hasAttribute
Native JS classList versus Native JS getAttribute
classList.add vs setAttribute
DataAttribute vs Class Selector on body
Comments
Confirm delete:
Do you really want to delete benchmark?