Benchmark: classList.contains vs. className.indexOf

HTML Preparation code:

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

Script Preparation code:

var test_element = document.getElementById("foo");

Tests:

Use hasClass shorthand
var result = test_element.className.indexOf("bar") != -1;
Use classList
var result = test_element.classList.contains("bar");

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Use hasClass shorthand
Use classList

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in this benchmark.

**Benchmark Definition**

The benchmark is comparing two approaches to check if an element has a specific class: `className.indexOf` and `classList.contains`. These methods are used to achieve the same goal, but with different syntax and semantics.

**Options Compared**

The two options being compared are:

1. **`className.indexOf`**: This method searches for the specified value in the `className` property of an element. If found, it returns the index of the occurrence; otherwise, it returns -1.
2. **`classList.contains`**: This method checks if a specific class is present in the `classList` property of an element.

**Pros and Cons**

### `className.indexOf`

Pros:

* Shorter syntax
* Can be used to check for multiple classes by chaining calls (e.g., `element.className.indexOf('bar') && element.className.indexOf('baz')`)
* Works with older browsers that don't support `classList`

Cons:

* Less efficient than `classList.contains` because it performs a linear search
* Returns the index of the first occurrence, not just whether the class is present

### `classList.contains`

Pros:

* More efficient than `className.indexOf`
* Returns only whether the class is present, without unnecessary indexing information
* Works with modern browsers that support `classList`

Cons:

* Longer syntax
* May not work as expected if the class name contains spaces or special characters (as it simply performs a substring search)

**Library Used**

In this benchmark, the `classList` property is being used, which is a part of the DOM Standard (ECMAScript 2015). The `classList.contains` method is a built-in method that allows checking for class presence in modern browsers.

**Special JS Feature or Syntax**

This benchmark uses the ES6 `classList` API, which is a newer feature introduced in ECMAScript 2015. This API provides a more efficient and convenient way to work with classes in JavaScript.

**Other Alternatives**

If you need to support older browsers that don't support `classList`, you can use alternative methods such as:

* Using regular expressions (`element.className.match(new RegExp('\\bbar\\b'))`)
* Using the `indexOf` method on the class names array (`element.className.indexOf('bar') === -1`)
* Creating a custom function to check for class presence

However, these alternatives may not be as efficient or convenient as using `classList.contains`.

In summary, this benchmark is testing the performance difference between two approaches to check if an element has a specific class: `className.indexOf` and `classList.contains`. The latter is more efficient and modern, but requires longer syntax.

Latest run results:

Run details: (Test run date: 3 years ago)

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

Browser/OS: Chrome 87 on Windows

View result in a separate tab

Test name	Executions per second
Use hasClass shorthand	10022060.0 Ops/sec
Use classList	5034193.0 Ops/sec

Related benchmarks:

classList.contains vs. className.indexOf (version: 0)

Comparing performance of: Use hasClass shorthand vs Use classList

Created: 5 years ago by: Guest

Jump to the latest result

Use hasClass shorthand

Use classList

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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