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"); }

Historical Performance Data aggregated from 11 community runs

Desktop Results:

Chrome 11 runs

matches

36K/s

classList

31K/s

closest

30K/s

matches with more complex selector

17K/s

Fastest: matches (2.2x faster)

View exact numbers

✓ matches: 36,387 ops/sec
• classList: 31,273 ops/sec
• closest: 29,625 ops/sec
• matches with more complex selector: 16,741 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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

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

Browser/OS: Chrome 143 on Windows

View result in a separate tab

classList

21K/s

matches

16K/s

closest

13K/s

matches with more complex selector

8K/s

View exact numbers

Test name	Executions per second
✓ classList	20,709 Ops/sec
matches	16,441 Ops/sec
closest	12,898 Ops/sec
matches with more complex selector	7,602 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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.

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: 4 years ago by: Guest

Go to the latest result

matches

closest

classList

matches with more complex selector

Historical Performance Data aggregated from 11 community runs

Desktop Results:

Chrome 11 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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: 4 years ago by: Guest

Go to the latest result

matches

closest

classList

matches with more complex selector

Historical Performance Data aggregated from 11 community runs

Desktop Results:

Chrome 11 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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