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

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 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.

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

Jump to the latest result

matches

closest

classList

matches with more complex selector

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