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

HTML Preparation code:

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

Tests:

matchese
var i = 1000; while (i--) { if (document.body.matches(".foo")) { return true; } }
classListw
var i = 1000; while (i--) { if (document.body.classList.contains('foo')) { return true; } }
classList someq
var i = 1000; while (i--) { if (['foo'].some(className => document.body.classList.contains(className))) { return true; } }
classNameq
var i = 1000; while (i--) { if (!!~document.body.className.indexOf('foo')) { return true; } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
matchese
classListw
classList someq
classNameq

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 126 on Windows

View result in a separate tab

Test name	Executions per second
matchese	522322.0 Ops/sec
classListw	561065.8 Ops/sec
classList someq	444190.2 Ops/sec
classNameq	647829.6 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided benchmark compares the performance of four different approaches to check if an HTML element has a specific class:

1. `element.matches()` (also known as CSS selector matching)
2. `element.classList.contains()` (method 1: using a string parameter)
3. `element.classList.some()` (method 2: using the `some()` method with a callback function)
4. `element.className` (method 3: using the `indexOf()` method on the `className` property)

Here's a brief explanation of each approach:

**1. element.matches()**

This method uses CSS selector matching to check if an element matches a given selector. In this case, the selector is `.foo`. This approach requires the browser to parse and execute the CSS rules.

Pros: Fast and efficient for simple selectors.
Cons: Can be slower for complex selectors or when the element has multiple classes with the same prefix (e.g., `foo-bar`).

**2. element.classList.contains()**

This method checks if an element contains a specific class by passing the class name as a string to the `contains()` method.

Pros: Fast and efficient, especially for simple class names.
Cons: Can be slower when dealing with complex or nested class structures.

**3. element.classList.some()**

This method uses the `some()` method with a callback function to check if an element has at least one matching class.

Pros: Allows for more flexibility in handling class names and nested classes.
Cons: May be slower due to the overhead of calling the `some()` method.

**4. element.className**

This method checks if the `className` property contains the target class by using the `indexOf()` method.

Pros: Fast and efficient, especially when dealing with simple class names.
Cons: Can be slower when dealing with complex or nested class structures.

Now, let's analyze the individual test cases:

* `matchese`: This test case uses `element.matches()`, which is a fast and efficient approach for simple selectors like `.foo`.
* `classListw`: This test case uses `element.classList.contains('foo')`, which is a good alternative to `element.matches()` when dealing with class names.
* `classList someq`: This test case uses the `some()` method, which provides more flexibility in handling complex class structures. However, it may be slower due to the overhead of calling the `some()` method.
* `classNameq`: This test case uses the `indexOf()` method on the `className` property, which is a fast and efficient approach for simple class names.

In terms of the latest benchmark result:

The results show that:

* `element.matches()`, `element.classList.contains()`, and `element.className` perform relatively similarly in terms of speed.
* The `some()` method seems to be slower than the other three approaches, but this may be due to the specific test case or browser implementation.

Other alternatives for benchmarking JavaScript performance include:

1. V8 Microbenchmark Suite (V8-MB): A collection of microbenchmarks designed to measure the performance of different JavaScript engines.
2. js-bench: A JavaScript benchmarking framework that allows users to define custom benchmarks and compare their performance across different browsers and environments.
3. Google Benchmark: A C++-based benchmarking library that can be used with Node.js and other JavaScript environments.

When working with these alternatives, it's essential to consider factors like test case specificity, browser implementation, and hardware configuration to ensure accurate results.

Related benchmarks:

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

Comparing performance of: matchese vs classListw vs classList someq vs classNameq

Created: 2 years ago by: Guest

Jump to the latest result

matchese

classListw

classList someq

classNameq

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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