Benchmark: matches vs. closest

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>

Previous results

Test case name	Result
matches
closest

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 6 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

Test name	Executions per second
matches	32916.8 Ops/sec
closest	27414.6 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

**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:

matches vs. closest (version: 0)

Comparing performance of: matches vs closest

Created: 4 years ago by: Guest

Jump to the latest result

matches

closest

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):