Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
matches vs. closest
(version: 0)
Comparing performance of:
matches vs closest
Created:
4 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div class="foo"><div class="bar"></div></div>
Tests:
matches
var element = document.querySelector(".foo"); var i = 1000; while (i--) { element.matches(".foo .bar"); }
closest
var element = document.querySelector(".foo"); var i = 1000; while (i--) { element.closest(".foo"); }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
matches
closest
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
9 months ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36
Browser/OS:
Chrome 141 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=618919" width="100%" height="500px"></iframe>
matches
33K/s
closest
27K/s
View exact numbers
Test name
Executions per second
✓
matches
32,917 Ops/sec
closest
27,415 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
**Overview** MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks to compare the performance of different approaches. The provided benchmark measures the difference in performance between two methods: `matches` and `closest`. **Tested Options** The test compares two options: 1. **`element.matches("*.foo .bar")`**: This method uses the `matches()` function to check if an element matches a CSS selector. In this case, the selector is `"*.foo .bar"`, which matches any descendant of `.foo` that also contains `.bar`. 2. **`element.closest(".foo")`**: This method uses the `closest()` function to find the closest ancestor of an element that matches a given selector. In this case, the selector is `"*.foo"`. **Pros and Cons** * **`element.matches("*.foo .bar")`**: * Pros: Efficient for matching complex selectors with many descendant combinations. * Cons: May be slower than `closest()` if the target element has multiple ancestors that match the selector, causing unnecessary DOM traversals. * **`element.closest(".foo")`**: * Pros: More efficient for finding a single ancestor element by allowing the browser to stop traversing as soon as it finds a matching element. It also avoids unnecessary checks on descendant elements. * Cons: May be slower than `matches()` if the target element does not have an ancestor that matches the selector, causing additional DOM traversals. **Library and Purpose** Neither of these methods relies on a specific library; they are built-in features of modern JavaScript and HTML5. However, `closest()` is part of the W3C standard for CSSOM (CSS Object Model), which is supported by most modern browsers. **Special JS Feature or Syntax** There isn't any special JS feature or syntax used in these benchmark test cases. These methods are standard features of JavaScript and don't require any specific syntax or features beyond what's available in modern JavaScript implementations. **Other Alternatives** If you were to optimize for speed, the approach would likely depend on the specific requirements of your use case: * **`element.matches()`**: This is a good choice if you need to check multiple descendant combinations and the target element has many ancestors that match the selector. * **`element.closest()`**: This is a better option when you're looking for a single ancestor element, especially if you have an inheritance chain with multiple matching elements. Keep in mind that the performance difference between these methods can be influenced by factors such as DOM structure complexity and browser implementation optimizations.
Related benchmarks
getElementsByClassName VS querySelectorAll (simple comparison)
.getElementsByClassName() vs. .querySelectorAll()
Comments
Confirm delete:
Do you really want to delete benchmark?