Benchmark: matches vs. classList vs. closest

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
matches
closest
classList

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 4 years ago)

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

Browser/OS: Chrome 80 on Fedora

View result in a separate tab

Test name	Executions per second
matches	6284.0 Ops/sec
closest	5905.4 Ops/sec
classList	8551.3 Ops/sec

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 explain what's being tested.

**Benchmark Definition**

The benchmark is defined by the JSON object at the top, which provides metadata about the test:

* `Name`: The name of the benchmark, "matches vs. classList vs. closest".
* `Description`: An empty string, indicating no description for this benchmark.
* `Script Preparation Code` and `Html Preparation Code`: Empty strings, indicating that no script preparation code or HTML preparation code is needed.

**Individual Test Cases**

The benchmark consists of three individual test cases:

1. `matches`
2. `closest`
3. `classList`

Each test case has a unique `Benchmark Definition`, which defines the JavaScript code to be executed for each test. These definitions are as follows:

* `matches`: The test checks if the element matches the CSS selector ".foo". This is done using the `element.matches()` method.
* `closest`: The test checks if the closest ancestor of the element has the class "foo". This is done using the `element.closest()` method.
* `classList`: The test checks if the element contains the class "bar". This is done using the `element.classList.contains("bar")` method.

**Options Compared**

The three test cases compare three different methods for checking the presence of a CSS selector or class:

1. `matches()`: Checks if an element matches a CSS selector.
2. `closest()`: Checks if the closest ancestor of an element has a certain class.
3. `classList.contains()`: Checks if an element contains a specific class.

**Pros and Cons**

Here's a brief overview of each method's pros and cons:

* `matches()`:
	+ Pros: Simple, widely supported, and efficient for most use cases.
	+ Cons: Can be slow for complex selectors or large datasets, may not work as expected with certain CSS properties (e.g., `::placeholder`).
* `closest()`: 
	+ Pros: Efficient for finding the closest ancestor of an element with a specific class, can handle nested classes.
	+ Cons: May not work if the closest ancestor is not found, or if it's a descendant rather than an ancestor.
* `classList.contains()`: 
	+ Pros: Simple, fast, and widely supported.
	+ Cons: Can be slower for large datasets or complex class names, may not work as expected with certain CSS properties (e.g., `::placeholder`).

**Library Used**

None of the test cases explicitly use a library. However, it's worth noting that some browsers may have internal optimizations or proprietary methods for executing these functions.

**Special JS Features/Syntax**

There are no special JavaScript features or syntax used in this benchmark beyond what's described above.

**Alternatives**

Other alternatives to compare these three methods could include:

* Using regular expressions (regex) instead of `matches()` and `classList.contains()`.
* Comparing the performance of `closest()` with other DOM-related methods, such as `querySelectorAll()` or `getElementsByClassName()`.
* Using a more specific CSS selector or class name to test the performance of each method under different conditions.

Keep in mind that the choice of alternative benchmark cases will depend on the specific requirements and goals of the test.

Related benchmarks:

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

Comparing performance of: matches vs closest vs classList

Created: 4 years ago by: Guest

Jump to the latest result

matches

closest

classList

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