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

Historical Performance Data aggregated from 76 community runs

Desktop Results:

Chrome 58 runs

classList

26K/s

matches

21K/s

closest

19K/s

Fastest: classList (1.4x faster)

View exact numbers

✓ classList: 26,115 ops/sec
• matches: 21,444 ops/sec
• closest: 18,774 ops/sec

Firefox 18 runs

classList

1.3M/s

matches

21K/s

closest

18K/s

Fastest: classList (68.0x faster)

View exact numbers

✓ classList: 1,256,763 ops/sec
• matches: 20,883 ops/sec
• closest: 18,487 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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 months ago)

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

Browser/OS: Chrome 147 on Windows

View result in a separate tab

classList

14K/s

matches

14K/s

closest

12K/s

View exact numbers

Test name	Executions per second
✓ classList	14,434 Ops/sec
matches	14,383 Ops/sec
closest	11,852 Ops/sec

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

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

Comparing performance of: `matches vs closest vs classList`

Created: 6 years ago by: Guest

Go to the latest result

matches

closest

classList

Historical Performance Data aggregated from 76 community runs

Desktop Results:

Chrome 58 runs

Firefox 18 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. closest vs. classList (version: 0)

Comparing performance of: matches vs closest vs classList

Created: 6 years ago by: Guest

Go to the latest result

matches

closest

classList

Historical Performance Data aggregated from 76 community runs

Desktop Results:

Chrome 58 runs

Firefox 18 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`