Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
classList.contains VS className.includes 1000
(version: 0)
?.x2 x1000
Comparing performance of:
className.includes vs classList.contains
Created:
4 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<div id="foo" class="test"></div>
Tests:
className.includes
let el = document.getElementById("foo"), i = 1000; while (i--) { el.className?.includes?.("test"); }
classList.contains
let el = document.getElementById("foo"), i = 1000; while (i--) { el.classList?.contains?.("test"); }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
className.includes
classList.contains
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):
Let's break down the benchmark and explain what's being tested. **Benchmark Overview** The benchmark measures the performance difference between two ways to check if an HTML element has a specific class: `className.includes` (a method on the `element` object) vs `classList.contains` (a method on the `element.classList` object). **Options Compared** Two options are compared: 1. `className.includes` 2. `classList.contains` **Pros and Cons of Each Approach** 1. **`className.includes`**: * Pros: Simple, straightforward, and widely supported. * Cons: May not be as efficient or readable as the alternative method. * Notes: This approach uses a property access (`.includes`) on the `element` object's `className` property. While it works, it can lead to slower performance compared to the alternative method. 2. **`classList.contains`**: * Pros: More efficient, modern, and readable. * Cons: Requires modern browsers that support the `classList` API (introduced in CSS3). * Notes: This approach uses a method call on the `element.classList` object. It's a more recent development but is now widely supported. **Library/ Framework** There is no explicit library mentioned, but the use of `element.classList` suggests that modern browsers with CSS3 support are being tested. **JavaScript Features/Syntax** The benchmark doesn't explicitly require any special JavaScript features or syntax other than modern browser support. However, it's worth noting that the `?.` operator (optional chaining) is used in some test cases, which was introduced in ECMAScript 2020. **Other Alternatives** If you were to write this benchmark from scratch, alternative approaches might include: 1. Using a library like Lodash or Ramda for utility functions. 2. Implementing your own class list checking logic using bitwise operations (e.g., checking if a specific mask is set). 3. Utilizing native WebAssembly (WASM) performance optimization techniques. Keep in mind that these alternatives would likely require more significant changes to the benchmark and might not be as representative of real-world usage patterns. I hope this explanation helps you understand what's being tested in the MeasureThat.net benchmark!
Related benchmarks:
className.indexOf vs. classList.contains 1
className.includes vs classList.contains
classList.contains vs. a
Contains className vs classList
long vs short classlist contains
Comments
Confirm delete:
Do you really want to delete benchmark?