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

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: 36 minutes ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:133.0) Gecko/20100101 Firefox/133.0

Browser/OS: Firefox 133 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
matches	26410.5 Ops/sec
closest	23685.8 Ops/sec
classList	1192718.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided benchmark measures the performance of three different methods for testing whether an HTML element matches a specific class: `matches()`, `closest()` with no specified class, and `classList.contains()`. The test is designed to compare the execution speed of these methods in a typical web browsing scenario.

**Options Compared**

1. **`matches()`**: This method returns a boolean value indicating whether the element matches the specified class.
2. **`closest()`**: Without a specified class, this method attempts to find the closest ancestor element with the same class as the current element. If no such ancestor is found, it returns `null`.
3. **`classList.contains()```**: This method checks if the given class name is present in the element's class list.

**Pros and Cons of Each Approach**

1. **`matches()`**:
	* Pros: Simple and efficient, as it only requires a single comparison.
	* Cons: May be slower than `closest()` or `classList.contains()` because it always performs a full class name lookup.
2. **`closest()`**:
	* Pros: Can potentially find the closest ancestor element with the matching class, reducing the number of elements to check.
	* Cons: May be slower due to the additional DOM traversal and may not perform well if no ancestor with the matching class is found.
3. **`classList.contains()`**:
	* Pros: Fast and efficient, as it only requires a single comparison with the class list.
	* Cons: Requires an additional method call to access the class list, which may incur some overhead.

**Library Usage**

The `closest()` method uses the `getPrototypeOf()` method to traverse the DOM tree upwards, searching for an ancestor element with the same class. The `classList.contains()` method uses the `classList` property, which is a standard HTML5 feature.

**Special JS Features or Syntax**

There are no special features or syntaxes used in this benchmark.

**Other Considerations**

* **Cache Busting**: To avoid cache effects, it's recommended to use a different class name for each test iteration.
* **Browser Support**: The benchmark assumes that the target browser supports modern JavaScript features like `closest()` and `classList.contains()`. If older browsers need to be supported, additional modifications may be necessary.

**Alternatives**

Other alternatives to these methods include:

* Using CSS selectors (e.g., `[class="foo"]`) for more efficient matching.
* Implementing a custom solution using regular expressions or other techniques.
* Using a library like jQuery's `hasClass()` method for faster class checking.

Keep in mind that the performance differences between these approaches may vary depending on the specific use case, browser, and implementation.

Related benchmarks:

matches vs. closest vs. classList (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):