Benchmark: matches vs. classList

HTML Preparation code:

<div class="foo"></div>

Tests:

matches
let element = document.querySelector(".foo"); let i = 1000; while (i--) { element.matches(".foo"); }
classList
let element = document.querySelector(".foo"); let 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
classList

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Firefox 146 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
matches	22741.2 Ops/sec
classList	1557562.8 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON data and explain what is being tested.

**Benchmark Definition**

The benchmark definition outlines two test cases: `matches` and `classList`. The purpose of this benchmark is to compare the performance of using `element.matches()` vs. `element.classList.contains()`. Both methods are used to check if an element has a specific class, in this case `.foo`.

**What is being tested?**

The main difference between these two approaches is the way they access and manipulate the class list.

1. **`matches()`**: This method returns a boolean value indicating whether the element matches the specified CSS selector.
2. **`classList.contains()`**: This method checks if the element contains a specific class by iterating through its class list and returning `true` if the class is found.

**Options compared**

The benchmark compares two options:

1. **Using `matches()`**: This approach uses a single method call to check if the element matches the specified CSS selector.
2. **Using `classList.contains()`**: This approach uses another method call to iterate through the element's class list and check for the presence of the specific class.

**Pros and Cons**

Here are some pros and cons of each approach:

* **`matches()`**:
	+ Pros: Simple, efficient, and straightforward.
	+ Cons: May have performance overhead due to CSS parsing.
* **`classList.contains()`**:
	+ Pros: More flexible and can handle complex class names.
	+ Cons: May be slower due to iteration over the class list.

In general, `matches()` is faster for simple class checks, while `classList.contains()` may offer better performance when dealing with more complex class names or scenarios where the class list needs to be modified frequently.

**Library and its purpose**

Neither `matches()` nor `classList.contains()` relies on a specific library. Both methods are part of the W3C standard (CSSOM Level 4) and are natively supported by most modern browsers.

**Special JS feature or syntax**

There is no special JavaScript feature or syntax being used in these benchmark tests. The focus is solely on comparing the performance of two specific method calls.

**Other alternatives**

If you're looking for alternative approaches to check if an element has a specific class, here are some options:

1. **`element.className`**: This property allows direct access to the element's class name(s) as a string.
2. **`element.classList.length > 0`**: This method checks if the element's class list is not empty.
3. **Using a library like jQuery or Zepto**, which provide additional utility methods for working with class lists.

Keep in mind that these alternatives may have different performance characteristics and use cases compared to `matches()` and `classList.contains()`.

Related benchmarks:

matches vs. classList (version: 0)

matches vs. classList

Comparing performance of: matches vs classList

Created: 4 years ago by: Guest

Jump to the latest result

matches

classList

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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