Benchmark: matches vs. complex matches vs closest vs. classList

HTML Preparation code:

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

Tests:

matches
var element = document.querySelector(".foo"); var i = 1000; while (i--) { element.matches(".foo"); }
closest
var element = document.querySelector(".foo"); var i = 1000; while (i--) { element.closest(".foo"); }
classList
var element = document.querySelector(".foo"); var i = 1000; while (i--) { element.classList.contains("foo"); }
matches with more complex selector
var element = document.querySelector(".foo"); var i = 1000; while (i--) { element.matches("div.bar, dev.baz, div.foo"); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
matches
closest
classList
matches with more complex selector

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
matches	43622.3 Ops/sec
closest	34134.5 Ops/sec
classList	49903.1 Ops/sec
matches with more complex selector	21489.1 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 definition and test cases.

**Benchmark Definition**

The benchmark measures the performance of three different DOM querying methods:

1. `element.matches()`
2. `element.closest()` (which is equivalent to `element.matches()` with an additional check for the element's ancestor)
3. `element.classList.contains()`

These methods are compared against each other, and their performance is reported in terms of executions per second.

**Options Compared**

The three options being compared are:

* `element.matches()`: This method returns a boolean value indicating whether the specified selector matches the element.
* `element.closest()` (or equivalent to `element.matches()` with an additional check for ancestor): This method returns the closest ancestor element that matches the specified selector, or null if no such ancestor exists.
* `element.classList.contains()`: This method returns a boolean value indicating whether the specified class name is present in the element's class list.

**Pros and Cons**

Here are some pros and cons of each approach:

* `element.matches()`:
	+ Pros: Lightweight and efficient, as it only checks for exact matches.
	+ Cons: May not work well with more complex selectors or ancestor relationships.
* `element.closest()`: (Equivalent to `element.matches()` with an additional check)
	+ Pros: Useful when working with ancestor relationships, but may introduce unnecessary overhead due to the additional check.
	+ Cons: Less efficient than `element.matches()` alone.
* `element.classList.contains()`: (Lightweight way to check for class presence)
	+ Pros: Very lightweight and efficient, as it only checks for exact class names.
	+ Cons: May not work well with more complex selectors or ancestor relationships.

**Library Used**

None of the test cases use any external libraries. The DOM querying methods themselves are part of the standard JavaScript API.

**Special JS Feature/ Syntax**

The benchmark uses some special syntax and features, including:

* `var element = document.querySelector(".foo");`: This is a modern way to select an element using CSS selectors.
* `.closest()`: This method was introduced in ECMAScript 2015 (ES6) as part of the standard JavaScript API.

**Alternatives**

If you wanted to optimize or compare different DOM querying methods, here are some alternatives:

1. Use `element.getAttribute("class")` instead of `element.classList.contains()`, which is less efficient but still available in older browsers.
2. Compare the performance of using `document.querySelectorAll()` versus `querySelectorAll()` with a specific selector.
3. Test the performance of different CSS selectors, such as using IDs, classes, or attribute selectors.

Keep in mind that DOM querying methods can have significant performance implications, so it's essential to test and optimize them according to your specific use case and requirements.

Related benchmarks:

matches vs. complex matches vs closest vs. classList (version: 0)

Comparing performance of: matches vs closest vs classList vs matches with more complex selector

Created: 3 years ago by: Guest

Jump to the latest result

matches

closest

classList

matches with more complex selector

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