<div id="foo" class="test"></div>
let el = document.getElementById("foo"), i = 1000;
while (i--) {
el.className?.includes?.("test");
}
let el = document.getElementById("foo"), i = 1000;
while (i--) {
el.classList?.contains?.("test");
}
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
className.includes | |
classList.contains |
Test name | Executions per second |
---|---|
className.includes | 18555.1 Ops/sec |
classList.contains | 9230.2 Ops/sec |
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:
className.includes
classList.contains
Pros and Cons of Each Approach
className.includes
:.includes
) on the element
object's className
property. While it works, it can lead to slower performance compared to the alternative method.classList.contains
:classList
API (introduced in CSS3).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:
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!