Benchmark: matches vs. complex matches vs closest vs. classList2

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("dev.baz"); }

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

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and its various test cases.

**Benchmark Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The current benchmark measures the performance of three different methods for checking if an HTML element matches a specific class or selector:

1. `matches()`
2. `closest()`
3. `classList.contains()`

The benchmark uses a simple HTML structure with a single `<div>` element, which is used as the target element for each test case.

**Test Cases**

There are four individual test cases:

### 1. `matches()`

This test case checks if the `document.querySelector()` method returns an element that matches the class `foo`. The benchmark runs a loop of 1000 iterations, where it repeatedly calls the `element.matches()` method on the selected element.

**Pros and Cons:**

* **Pros:** Simple to implement, widely supported.
* **Cons:** Can be slower than other methods due to the need for extra checks (e.g., checking if the result is a boolean value).

### 2. `closest()`

This test case checks if the `document.querySelector()` method returns an element that has a closest ancestor with the class `foo`. The benchmark runs a loop of 1000 iterations, where it repeatedly calls the `element.closest()` method on the selected element.

**Pros and Cons:**

* **Pros:** Often faster than `matches()` due to fewer checks.
* **Cons:** May not work as expected if there are multiple elements with the class `foo`.

### 3. `classList.contains()`

This test case checks if the `element.classList` property contains the string `'foo'`. The benchmark runs a loop of 1000 iterations, where it repeatedly calls the `element.classList.contains()` method on the selected element.

**Pros and Cons:**

* **Pros:** Often faster than `matches()` due to fewer checks.
* **Cons:** May not work as expected if there are multiple elements with the class `foo`.

### 4. `matches` with more complex selector

This test case checks if the `document.querySelector()` method returns an element that matches a more complex CSS selector (`dev.baz`). The benchmark runs a loop of 1000 iterations, where it repeatedly calls the `element.matches()` method on the selected element.

**Pros and Cons:**

* **Pros:** Tests the performance of more complex selectors.
* **Cons:** May be slower than other methods due to the increased complexity.

**Library Usage**

None of the test cases use any external libraries. They rely solely on built-in JavaScript methods.

**Special JS Features or Syntax**

There are no special JavaScript features or syntax used in these test cases.

**Other Considerations**

The benchmark uses a simple HTML structure and a fixed loop iteration count to ensure that the results are not affected by variations in execution time. However, this approach may not accurately represent real-world scenarios where the number of iterations can vary greatly.

In terms of alternatives, other methods for checking if an element matches a class or selector include:

* `innerHTML.includes()` (not recommended due to performance issues)
* `querySelectorAll()` with `length` property access
* Using a regular expression (`^` and `$` anchors)

It's worth noting that the choice of method often depends on the specific use case, such as when working with legacy code or when specific optimizations are required.

Latest run results:

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

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

Browser/OS: Chrome 117 on Linux

View result in a separate tab

Test name	Executions per second
matches	3004.7 Ops/sec
closest	2672.3 Ops/sec
classList	3838.2 Ops/sec
matches with more complex selector	2961.4 Ops/sec

Related benchmarks:

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

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

Created: one year 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 one month ago):