Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
boolean flag vs. classList.contains
(version: 0)
Comparing performance of:
bool vs classList
Created:
2 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div id="foo" class="test"></div>
Tests:
bool
var element = document.getElementById("foo"); var i = 1000; var check = false; while (i--) { if (check) {} }
classList
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.classList.contains("test"); }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
bool
classList
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36
Browser/OS:
Chrome 120 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=499924" width="100%" height="500px"></iframe>
bool
1.8M/s
classList
22K/s
View exact numbers
Test name
Executions per second
✓
bool
1,817,902 Ops/sec
classList
22,113 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided benchmark and explain what's being tested, compared, and their pros and cons. **Benchmark Overview** The benchmark compares two approaches to check if an element has a specific class: using a boolean flag (`var check = false;`) versus using the `classList.contains()` method. The test is designed to measure which approach is faster for a large number of iterations (1000). **Options Compared** 1. **Boolean Flag Approach**: This approach uses a simple boolean variable (`var check = false;`) to track whether the element has the class "test". It involves a while loop that iterates 1000 times, checking the condition inside the loop. 2. **classList.contains() Method**: This approach uses the `classList` property of the element to get its class list and then checks if the specific class ("test") is present using the `contains()` method. **Pros and Cons** 1. **Boolean Flag Approach**: * Pros: Simple, easy to understand, and doesn't require any additional library or API calls. * Cons: Can be slower for large numbers of iterations due to the overhead of checking a boolean value in each iteration. 2. **classList.contains() Method**: * Pros: Generally faster for large numbers of iterations as it avoids the overhead of explicit boolean checks and can utilize the browser's internal class list caching mechanisms. * Cons: Requires access to the `classList` property, which might not be supported in older browsers or certain environments. **Library and Purpose** The `classList` property is a standard API provided by modern web browsers (starting from Chrome 14) that allows you to get and manipulate the class list of an element. In this benchmark, it's used to check if an element has a specific class without having to use explicit boolean flags or conditional statements. **Special JS Feature/Syntax** There doesn't seem to be any special JavaScript features or syntax being tested in this benchmark. The code uses standard JavaScript constructs and doesn't rely on any advanced or experimental features. **Other Alternatives** Some alternative approaches that could potentially be used for this benchmark include: 1. **Using a more optimized `classList.contains()` implementation**: Some browsers provide optimized implementations of the `classList.contains()` method, which might outperform the standard API calls. 2. **Using a custom caching mechanism**: Implementing a custom caching mechanism to store and retrieve the class list information could potentially improve performance by avoiding repeated API calls. 3. **Using parallel processing**: Running multiple iterations of the benchmark in parallel using Web Workers or other concurrency mechanisms could potentially speed up the test by utilizing multiple CPU cores. However, these alternatives might not be as straightforward to implement and may require additional development effort. Overall, the benchmark provides a clear comparison between two simple approaches to check if an element has a specific class. By understanding the pros and cons of each approach, developers can make informed decisions about which optimization techniques to use in their own code.
Related benchmarks
jQuery hasClass vs jQuery classList.contains
querySelector vs classList.contains
Comments
Confirm delete:
Do you really want to delete benchmark?