Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
matches vs. classList
(version: 0)
matches vs. classList
Comparing performance of:
matches vs classList
Created:
5 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div class="foo"></div>
Tests:
matches
let element = document.querySelector(".foo"); let i = 1000; while (i--) { element.matches(".foo"); }
classList
let element = document.querySelector(".foo"); let i = 1000; while (i--) { element.classList.contains("foo"); }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
matches
classList
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
7 months ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:146.0) Gecko/20100101 Firefox/146.0
Browser/OS:
Firefox 146 on Mac OS X 10.15
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=623199" width="100%" height="500px"></iframe>
classList
1.6M/s
matches
23K/s
View exact numbers
Test name
Executions per second
✓
classList
1,557,563 Ops/sec
matches
22,741 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided JSON data and explain what is being tested. **Benchmark Definition** The benchmark definition outlines two test cases: `matches` and `classList`. The purpose of this benchmark is to compare the performance of using `element.matches()` vs. `element.classList.contains()`. Both methods are used to check if an element has a specific class, in this case `.foo`. **What is being tested?** The main difference between these two approaches is the way they access and manipulate the class list. 1. **`matches()`**: This method returns a boolean value indicating whether the element matches the specified CSS selector. 2. **`classList.contains()`**: This method checks if the element contains a specific class by iterating through its class list and returning `true` if the class is found. **Options compared** The benchmark compares two options: 1. **Using `matches()`**: This approach uses a single method call to check if the element matches the specified CSS selector. 2. **Using `classList.contains()`**: This approach uses another method call to iterate through the element's class list and check for the presence of the specific class. **Pros and Cons** Here are some pros and cons of each approach: * **`matches()`**: + Pros: Simple, efficient, and straightforward. + Cons: May have performance overhead due to CSS parsing. * **`classList.contains()`**: + Pros: More flexible and can handle complex class names. + Cons: May be slower due to iteration over the class list. In general, `matches()` is faster for simple class checks, while `classList.contains()` may offer better performance when dealing with more complex class names or scenarios where the class list needs to be modified frequently. **Library and its purpose** Neither `matches()` nor `classList.contains()` relies on a specific library. Both methods are part of the W3C standard (CSSOM Level 4) and are natively supported by most modern browsers. **Special JS feature or syntax** There is no special JavaScript feature or syntax being used in these benchmark tests. The focus is solely on comparing the performance of two specific method calls. **Other alternatives** If you're looking for alternative approaches to check if an element has a specific class, here are some options: 1. **`element.className`**: This property allows direct access to the element's class name(s) as a string. 2. **`element.classList.length > 0`**: This method checks if the element's class list is not empty. 3. **Using a library like jQuery or Zepto**, which provide additional utility methods for working with class lists. Keep in mind that these alternatives may have different performance characteristics and use cases compared to `matches()` and `classList.contains()`.
Related benchmarks
DataAttribute vs Class Selector on body
querySelector vs classList.contains
Comments
Confirm delete:
Do you really want to delete benchmark?