Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
matches vs. closest vs. classList vs. querySelector
(version: 1)
Comparing performance of:
matches vs closest vs classList vs querySelector
Created:
one year ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div class="foo"></div>
Tests:
matches
var element = document.querySelector(".foo"); var i = 1000; while (i--) { element.matches(".foo"); }
closest
var element = document.querySelector(".foo"); var i = 1000; while (i--) { element.closest(".foo"); }
classList
var element = document.querySelector(".foo"); var i = 1000; while (i--) { element.classList.contains("foo"); }
querySelector
var i = 1000; while (i--) { document.querySelector(".foo"); }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (4)
Previous results
Fork
Test case name
Result
matches
closest
classList
querySelector
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 months ago
)
User agent:
Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:150.0) Gecko/20100101 Firefox/150.0
Browser/OS:
Firefox 150 on Ubuntu
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=629096" width="100%" height="500px"></iframe>
classList
1.9M/s
matches
19K/s
closest
18K/s
querySelector
7K/s
View exact numbers
Test name
Executions per second
✓
classList
1,871,157 Ops/sec
matches
18,702 Ops/sec
closest
17,764 Ops/sec
querySelector
7,363 Ops/sec
Autogenerated LLM Summary
(model
gpt-4o-mini
, generated one year ago):
The benchmark named "matches vs. closest vs. classList vs. querySelector" evaluates the performance of four distinct methods that are commonly used in JavaScript for querying or interacting with HTML elements. Below, I’ll explain each method tested, compare their pros and cons, and provide you with an overview of the results from the benchmark. ### Test Cases and Their Purpose 1. **matches()** - **Usage**: `element.matches(".foo")` - **Purpose**: This method checks if the specific element (`element`) matches the provided CSS selector (in this case, `".foo"`). It returns true or false. - **Pros**: It allows you to perform a quick check against CSS selectors directly on the element itself. - **Cons**: Slightly less performant compared to the other methods in this benchmark, as the selector check may take additional time. 2. **closest()** - **Usage**: `element.closest(".foo")` - **Purpose**: This method searches up the DOM tree from the element and returns the closest ancestor that matches the given selector (or the element itself if it matches). - **Pros**: It’s particularly useful for situation where you need to find ancestor elements, making it powerful in handling nested structures. - **Cons**: Performance is generally lower than `classList.contains` and can be affected if the DOM tree is deep. 3. **classList.contains()** - **Usage**: `element.classList.contains("foo")` - **Purpose**: This method checks if the element has a specific class name (here, "foo"). - **Pros**: Very efficient as it operates directly on the element's class list without the need of selector processing. - **Cons**: Limited in functionality; it only works with class names and cannot check complex CSS selectors. 4. **querySelector()** - **Usage**: `document.querySelector(".foo")` - **Purpose**: This method retrieves the first element within the document that matches the specified selector. - **Pros**: Flexible and powerful for element selection using complex selectors. - **Cons**: It can be slower than other methods if you repeatedly search for the same element, as it involves parsing the selector every time. ### Benchmark Results The benchmark results show the number of executions per second for each method when the loop runs 1000 times: - **classList**: 56,265 executions/second (fastest) - **closest**: 9,812 executions/second - **querySelector**: 8,889 executions/second - **matches**: 7,825 executions/second (slowest) ### Summary From the results: - `classList.contains` outperformed the other methods significantly, making it the best choice for checking whether an element has a certain class. - `closest` is a good option when you need to find elements within the DOM hierarchy, although it's noticeably slower. - `querySelector` provides flexibility but introduces more overhead due to selector parsing. - `matches` is the least performant in this benchmark, but it remains valuable for CSS selector matching directly on an element. ### Other Considerations and Alternatives - For scenarios with frequent class checks, sticking to `classList.contains` is recommended due to its speed. - If the scope requires working with complex selectors frequently, `querySelector` may still be necessary despite its overhead. - Developers might also consider caching the results of `querySelector` or `closest` when used in loops to spare unnecessary computations. Ultimately, choosing the right method will depend on the specific use case, performance needs, and flexibility required.
Related benchmarks
matches vs. closest vs. classList
matches vs. closest vs. classList vs tagName
matches vs. complex matches vs closest vs. classList
matches vs. closest
matches vs. closest 2
matches vs. closest vs. classList (with element tag check) 2
Comments
Confirm delete:
Do you really want to delete benchmark?