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

Historical Performance Data aggregated from 15 community runs

Desktop Results:

Chrome 9 runs

classList some

15.4M/s

matches

12.4M/s

classList

9.1M/s

Fastest: classList some (1.7x faster)

View exact numbers

✓ classList some: 15,355,050 ops/sec
• matches: 12,389,874 ops/sec
• classList: 9,118,601 ops/sec

Firefox 6 runs

classList some

5.9M/s

matches

5.6M/s

classList

3.1M/s

Fastest: classList some (1.9x faster)

View exact numbers

✓ classList some: 5,907,104 ops/sec
• matches: 5,636,118 ops/sec
• classList: 3,078,115 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
classList
classList some

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:35.0) Gecko/20100101 Firefox/35.0

Browser/OS: Firefox 35 on Windows

View result in a separate tab

matches

5.7M/s

classList some

5.6M/s

classList

2.3M/s

View exact numbers

Test name	Executions per second
✓ matches	5,748,182 Ops/sec
classList some	5,574,144 Ops/sec
classList	2,312,090 Ops/sec

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

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

Comparing performance of: `matches vs classList vs classList some`

Created: 4 years ago by: Guest

Go to the latest result

matches

classList

classList some

Historical Performance Data aggregated from 15 community runs

Desktop Results:

Chrome 9 runs

Firefox 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

Comparing performance of: matches vs classList vs classList some

Created: 4 years ago by: Guest

Go to the latest result

matches

classList

classList some

Historical Performance Data aggregated from 15 community runs

Desktop Results:

Chrome 9 runs

Firefox 6 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 classList vs classList some`