Benchmark: Javascript classList.contains vs element.matches vs classList.some

HTML Preparation code:

<body class="foo bar baz"></body>

Tests:

matches
var i = 1000; while (i--) { if (document.body.matches(".foo.baz")) { return true; } }
classList
var i = 1000; while (i--) { if (document.body.classList.contains('foo') && document.body.classList.contains('baz')) { return true; } }
classList some
var i = 1000; while (i--) { if (['foo', 'baz'].some(className => document.body.classList.contains(className))) { return true; } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
matches
classList
classList some

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 8 days ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Browser/OS: Chrome 135 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
matches	16627298.0 Ops/sec
classList	9264364.0 Ops/sec
classList some	17501172.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark and explain what's being tested, the options compared, their pros and cons, and other considerations.

**Benchmark Overview**

The provided benchmark measures the performance of three different methods to check if an element matches a certain class in JavaScript:

1. `element.matches()`
2. `classList.contains()` (on the `element` itself)
3. `some()` method on the `classList` array

These methods are compared for their execution speed, and the benchmark aims to identify which one is the fastest.

**Options Compared**

The three options being tested are:

1. **`element.matches()`**: This method is introduced in HTML5 and allows checking if an element matches a CSS selector. It's part of the DOM API and is supported by most modern browsers.
2. **`classList.contains()`**: This method is part of the DOM API and allows checking if a class is present on an element. However, it only works when called on the `element` itself, not on the `element's classList`.
3. **`some()` method on the `classList` array**: This method iterates over the classes in the `classList` array and returns `true` as soon as a match is found.

**Pros and Cons of Each Approach**

1. **`element.matches()`**
	* Pros: Fast, modern, and widely supported.
	* Cons: May not be supported in older browsers or environments that don't have CSS selectors enabled.
2. **`classList.contains()`**
	* Pros: Simple, easy to understand, and works in most browsers.
	* Cons: Only checks for the presence of a single class, not for matching multiple classes. Also, it only works on the `element` itself, not on the `element's classList`.
3. **`some()` method on the `classList` array**
	* Pros: Can check for multiple classes and is more flexible than `classList.contains()`. However, it may be slower due to the iteration.
	* Cons: May be slower due to the iteration over the classes array.

**Library Used**

None of these methods rely on any external libraries. They are part of the standard JavaScript DOM API or built-in features.

**Special JS Feature/Syntax**

None of the tested methods use special JavaScript features or syntax that would affect their performance.

**Benchmark Preparation Code**

The provided HTML preparation code creates a simple `body` element with three classes: `foo`, `bar`, and `baz`.

**Other Alternatives**

In addition to these three options, other methods can be used to check if an element matches a class, such as:

* Using a CSS selector library like `css-selector` or `jsdom`
* Using a regex-based approach
* Using a framework-specific method (e.g., React's `useMemo` hook)

However, these alternatives are not part of the standard JavaScript DOM API and may have different performance characteristics.

In summary, the benchmark aims to identify the fastest way to check if an element matches a class in modern browsers. The results will help developers make informed decisions about which method to use for their specific use cases.

Related benchmarks:

Javascript classList.contains vs element.matches vs classList.some (version: 0)

Comparing performance of: matches vs classList vs classList some

Created: 3 years ago by: Guest

Jump to the latest result

matches

classList

classList some

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):