Benchmark: Javascript classList.contains vs element.matches

HTML Preparation code:

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

Tests:

matches
const element = document.querySelector('.foo'); var i = 1000; while (i--) { element.matches(".foo.bar"); }
classList
const element = document.querySelector('.foo'); var i = 1000; while (i--) { element.classList.contains('foo') && element.classList.contains('bar'); }

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: 2 years ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:123.0) Gecko/20100101 Firefox/123.0

Browser/OS: Firefox 123 on Linux

View result in a separate tab

Test name	Executions per second
matches	6611.1 Ops/sec
classList	359931.1 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 benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark is comparing two approaches to check if an HTML element contains a specific class: `element.matches` (also known as "CSS Selectors") vs `element.classList.contains('foo') && element.classList.contains('bar')`.

**What are we testing?**

We're testing the performance of these two approaches on different browsers and devices.

**Options Compared**

The benchmark is comparing two options:

1. **`element.matches(" .foo.bar ")`**: This uses CSS selectors to check if the element contains a class with the name `foo.bar`. This approach is fast because it's optimized for DOM queries.
2. **`element.classList.contains('foo') && element.classList.contains('bar')`**: This checks if each of the classes `foo` and `bar` are present on the element using the `classList` property.

**Pros and Cons**

1. **`element.matches(" .foo.bar ")`**:
	* Pros: Fast, optimized for DOM queries.
	* Cons: Only works with CSS selectors, not directly with class names.
2. **`element.classList.contains('foo') && element.classList.contains('bar')`**:
	* Pros: Works directly with class names, can be used when CSS selectors are not available or too slow.
	* Cons: May be slower due to the extra function call and check.

**Library/Functionality**

In this benchmark, we're using:

1. **CSS Selectors**: Built-in JavaScript API for selecting elements based on CSS rules.
2. **`classList` property**: A DOM method that returns an iterable of classes present on an element.

**Special JS Feature/Syntax**

This benchmark uses the `const` keyword for variable declaration, which is a modern JavaScript feature introduced in ECMAScript 2015 (ES6).

**Other Considerations**

1. **Browser Support**: The benchmark tests performance on Firefox 123, but it's likely that other browsers may have different performance characteristics.
2. **Device Platform**: The test runs on desktop Linux devices, which might not represent the full range of possible platforms and devices.

**Alternatives**

If you wanted to create a similar benchmark, you could consider:

1. Testing other class-related methods, such as `element.classList.contains()` with multiple classes or using a different library like jQuery.
2. Adding more browsers, device platforms, or operating systems to test the performance in different scenarios.
3. Comparing performance on other DOM queries, such as `document.querySelectorAll(".foo.bar")` vs `array.prototype.some.call(arrayOfElements, element => element.classList.contains("foo.bar"))`.

Related benchmarks:

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

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):