Benchmark: matches vs. closest vs. classList (with element tag check)

HTML Preparation code:

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

Tests:

matches
var element = document.querySelector(".foo"); var i = 1000; while (i--) { element.matches("div.foo"); }
closest
var element = document.querySelector(".foo"); var i = 1000; while (i--) { element.closest("div.foo"); }
classList (with nodeName)
var element = document.querySelector(".foo"); var i = 1000; while (i--) { element.nodeName === "DIV" && element.classList.contains("foo"); }
classList (with tagName)
var element = document.querySelector(".foo"); var i = 1000; while (i--) { element.tagName === "DIV" && element.classList.contains("foo"); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
matches
closest
classList (with nodeName)
classList (with tagName)

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36

Browser/OS: Chrome 113 on Windows

View result in a separate tab

Test name	Executions per second
matches	21171.2 Ops/sec
closest	19870.4 Ops/sec
classList (with nodeName)	11307.9 Ops/sec
classList (with tagName)	8719.3 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what is being tested.

**Benchmark Definition**

The benchmark measures the performance of three different methods to check if an HTML element matches a certain class or has a specific tag name:

1. `element.matches("div.foo")`: Uses the `matches()` method to check if the element matches the class "foo".
2. `element.closest(".foo")`: Uses the `closest()` method to find the closest ancestor that matches the class "foo".
3. `element.nodeName === "DIV" && element.classList.contains("foo")`: Uses a combination of checking the element's node name and contains the class "foo".
4. `element.tagName === "DIV" && element.classList.contains("foo")`: Similar to the previous method, but uses the `tagName` property instead of `nodeName`.

**Options Compared**

The benchmark compares the performance of each method:

* **`matches()`**: A simple and efficient method that checks if the element matches a selector.
* **`closest()`**: A method that finds the closest ancestor that matches a selector. This method can be slower than `matches()`, especially for elements with multiple ancestors.
* **Combination methods** (`nodeName` or `tagName` with `classList.contains()`): These methods use additional checks to ensure accuracy, but can also be slower due to the extra computations.

**Pros and Cons**

Here are some pros and cons of each method:

* **`matches()`**: Fast, efficient, and accurate. However, may not work for elements that don't have a matching class or tag name.
* **`closest()`**: Can be slower than `matches()`, but provides a way to find the closest ancestor that matches a selector.
* **Combination methods**:
	+ Pros: More accurate and reliable than relying solely on class names or tag names.
	+ Cons: May be slower due to additional checks.

**Library Used**

The benchmark uses the following libraries:

* `document.querySelector()` and `element` are standard JavaScript API functions that select elements based on a CSS selector.
* No other specific libraries are used in this benchmark.

**Special JS Feature or Syntax**

None of the methods mentioned use any special JavaScript features or syntax. They all rely on standard JavaScript APIs.

**Other Alternatives**

For testing similar benchmarks, you could consider:

* Using `element.classList.contains()` instead of `matches()`, as it provides more control over the matching process.
* Using a different HTML structure or classes to test different scenarios.
* Using other methods like `element.namespaceURI` and `element.tagName` to check for element type.

Keep in mind that these alternatives would require adjusting the benchmark definition and script preparation code accordingly.

Related benchmarks:

matches vs. closest vs. classList (with element tag check) (version: 0)

Comparing performance of: matches vs closest vs classList (with nodeName) vs classList (with tagName)

Created: one year ago by: Guest

Jump to the latest result

matches

closest

classList (with nodeName)

classList (with tagName)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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