Benchmark: matches vs selector

HTML Preparation code:

<div id="parenter">
  <div class="parent level_one">
    <div class="child" id="child_first">child 1</div>
  </div>
  <div class="parent level_nested">
   <div class="lev1" id="child1">
     <div class="lev2" id="child2">
       <div class="lev3" id="child3">
         <div class="lev4" id="child4">child 4</div>
       </div>
     </div>
    </div>
  </div>
</div>

Script Preparation code:

uidc = 0;
function getUid (el) {
	var id = el.id;
	if(!id) {
  	id = "uid_"+ (++uidc);
  	el.id = id;
  }
	return id;
}
var target1 = document.querySelector("#child1");
var target4 = document.querySelector("#child4");
var parent = document.querySelector("#parenter");
function matchSel (target, selector, parent) {
  while(target && target !== parent){
    if(target.matches(selector)){
      return;
    }else{
      target = target.parentNode;
    }
  }
}

Tests:

matches nested 4
matchSel (target4, ".parent", parent);
selector nested 1
parent.querySelector(".parent #"+target1.id);
matches nested 1
matchSel (target1, ".parent", parent);
selector nested 4
parent.querySelector(".parent #"+target4.id);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
matches nested 4
selector nested 1
matches nested 1
selector nested 4

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its options.

**Benchmark Overview**

The benchmark is designed to test the performance of two different approaches for selecting elements in a DOM tree: using `matches` or `querySelector`. The goal is to determine which approach is faster, especially for nested elements.

**Options Compared**

There are four test cases:

1. **`matchSel (target4, ".parent", parent)`**: This test case uses the `matches` method to select an element that has a common ancestor with the target element (`parent`). The `.parent` selector is used.
2. **`parent.querySelector(".parent #" + target1.id)`**: This test case uses the `querySelector` method to select an element by its ID and then use a relative selector (`" .parent"`). Note that the `#` character is prepended to the ID, which means the browser will look for an element with a class of `.parent` that has an ID matching the one specified.
3. **`matchSel (target1, ".parent", parent)`**: This test case uses the `matches` method again, but this time with the same target element (`target1`) and selector (`".parent"`).
4. **`parent.querySelector(".parent #" + target4.id)`**: This test case is similar to the previous one, but with a different order of operations.

**Pros and Cons of Each Approach**

* **`matches` method**:
	+ Pros: Can be faster for nested elements, as it can use the `matches` algorithm, which is optimized for common ancestor selection.
	+ Cons: May not work well if the selector is complex or if there are many elements with the same class.
* **`querySelector` method**:
	+ Pros: More flexible and powerful, especially when used with relative selectors.
	+ Cons: Can be slower than `matches` for nested elements, as it requires a more expensive search operation.

**Library Used**

None. This benchmark uses only native JavaScript methods (`matches`, `querySelector`) and no third-party libraries.

**Special JS Features or Syntax**

There are no special features or syntax used in this benchmark. The code is straightforward and relies on standard JavaScript functionality.

**Other Considerations**

The benchmark also includes information about the device platform, operating system, and browser version, which can affect performance.

**Alternatives**

If you're interested in exploring alternative approaches for DOM selection, here are a few:

* **`querySelectorAll` method**: This method returns all elements that match the specified selector. It's slower than `matches` or `querySelector`, but can be useful for certain use cases.
* **Svelte's `$el` property**: Svelte is a compiler-based framework that allows you to define components and their relationships using a simpler syntax. The `$el` property provides access to the DOM element associated with a component, which can simplify DOM selection tasks.
* **Query libraries like jQuery or Velcro.js**: These libraries provide additional features and flexibility for DOM manipulation, but may introduce performance overhead.

Keep in mind that these alternatives are not directly related to the specific question at hand (comparing `matches` and `querySelector`), but rather offer alternative ways of thinking about DOM selection and manipulation.

Related benchmarks:

matches vs selector (version: 3)

For nested elements, better to use queryselector, for 2 level parents matches.

Comparing performance of: matches nested 4 vs selector nested 1 vs matches nested 1 vs selector nested 4

Created: 9 years ago by: Registered User

Jump to the latest result

matches nested 4

selector nested 1

matches nested 1

selector nested 4

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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