Benchmark: test matches vs querySelectorAll + contains

HTML Preparation code:

<div class="foo"><div class="bar"></div></div>

Tests:

matches
var element = document.querySelector(".bar"); var i = 5000 * 5000; while (i--) { element.closest(".foo"); }
querySelectoAll + contains
var element = document.querySelector(".bar"); var i = 5000; while (i--) { const element2 = document.querySelector(".foo"); var j = 5000; while (j--) { element2.contains(element); } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
matches
querySelectoAll + contains

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 10 months ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36

Browser/OS: Chrome 137 on Linux

View result in a separate tab

Test name	Executions per second
matches	0.5 Ops/sec
querySelectoAll + contains	1.3 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 10 months ago):

LLMs can make mistakes. Check important info.

The benchmark provided tests the performance of two different methods for traversing the DOM (Document Object Model) in JavaScript: using the `matches` method and combining `querySelectorAll` with `contains`.

### Options Compared

1. **`matches` Method**:
   - **Test Code**: 
     ```javascript
     var element = document.querySelector(".bar");
     var i = 5000 * 5000;
     while (i--) {
         element.closest(".foo");
     }
     ```
   - In this approach, the benchmark measures how quickly the `closest` method can navigate up the DOM tree from the `.bar` element to find its closest ancestor that matches the selector `.foo`. Here, `closest` is a method that checks the element itself and its ancestors in the DOM, returning the first element that matches the selector.

2. **`querySelectorAll` + `contains`**:
   - **Test Code**: 
     ```javascript
     var element = document.querySelector(".bar");
     var i = 5000;
     while (i--) {
         const element2 = document.querySelector(".foo");
         var j = 5000;
         while (j--) {
             element2.contains(element);
         }
     }
     ```
   - This test approach uses `querySelector` to select the `.foo` element, and within a nested loop, it checks if `.foo` contains the `.bar` element by calling `contains`. The `contains` method checks whether a node is a descendant of a specified node.

### Pros and Cons

#### `matches` Method
- **Pros**:
  - Efficient for ancestry queries, as it directly finds the nearest matching ancestor.
  - Less overhead in terms of DOM queries since it operates only on the element in question and its ancestors.
  
- **Cons**:
  - It can be less intuitive for some use cases if the requirement is to validate membership within a set of elements rather than finding an ancestor.

#### `querySelectorAll + contains`
- **Pros**:
  - Provides a flexible way to check for ancestor/descendant relationships by explicitly checking which element contains another.
  - Works well if you need to check multiple relationships since you can easily modify the logic to consider various contexts.

- **Cons**:
  - More overhead involved due to the extra DOM query each time the `querySelector` is called.
  - Potentially less efficient since it involves iterating over multiple elements in nested loops.

### Additional Considerations
- This benchmark runs on Chrome 137 under a Linux desktop environment, and the results indicate that the `matches` method is significantly faster (approximately 2.5 times faster) than the `querySelectorAll + contains` method in the tested scenario, executing 1.33 times per second versus 0.53 times per second.
- Both methods are part of the DOM API and are generally well-supported across modern browsers. However, performance may vary based on the complexity and size of the DOM and the specific browser implementations.

### Alternatives
- Other methods for DOM tree traversal include `parentNode`, `children`, and using jQuery methods like `closest()` which internally could use `matches`.
- If looking for more advanced querying strategies, libraries like jQuery or Lodash provide enhanced capabilities but may come with a performance overhead due to their added abstraction layers.

In conclusion, while both methods can achieve similar outcomes, the choice between them should consider the specific use case, the complexity of the DOM, and the required performance characteristics.

Related benchmarks:

test matches vs querySelectorAll + contains (version: 1)

Comparing performance of: matches vs querySelectoAll + contains

Created: 10 months ago by: Guest

Jump to the latest result

matches

querySelectoAll + contains

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 10 months ago):