Benchmark: JavaScript className.indexOf vs. classList.contains

HTML Preparation code:

<div id="foo" class="test"></div>

Tests:

className.indexOf
var element = document.getElementById("foo"); var i = 1000000; while (i--) { if (element.className.indexOf("test") !== -1) {} }
classList.contains
var element = document.getElementById("foo"); var i = 1000000; while (i--) { element.classList.contains("test"); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
className.indexOf
classList.contains

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:145.0) Gecko/20100101 Firefox/145.0

Browser/OS: Firefox 145 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
className.indexOf	505.6 Ops/sec
classList.contains	907.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in the provided benchmark.

**Benchmark Overview**

The benchmark compares two ways to check if an HTML element contains a specific class: `className.indexOf` and `classList.contains`. The goal is to determine which method is faster.

**Options Compared**

Two approaches are compared:

1. **`className.indexOf`**: This method searches for the presence of the class name in the `className` property of the element using the `indexOf()` method.
2. **`classList.contains`**: This method checks if the element contains a specific class by calling the `contains()` method on the `classList` object.

**Pros and Cons**

1. **`className.indexOf`**:
	* Pros: This method is more widely supported across older browsers, as it's based on the DOM Level 2 specification.
	* Cons: It can be slower due to its more complex logic and potential caching issues. The `indexOf()` method returns -1 if not found, which may lead to unnecessary computations in some cases.
2. **`classList.contains`**:
	* Pros: This method is generally faster and more efficient, as it uses a cached array of classes for each element. It's also more modern and widely supported across newer browsers.
	* Cons: This method requires the `classList` property to be implemented by the browser, which may not be available in older versions.

**Library**

In this benchmark, no library is explicitly mentioned, but it's worth noting that `classList.contains()` relies on the `classList` object, which is a part of the DOM Standard (DOM Level 3).

**Special JavaScript Feature or Syntax**

There are no special features or syntaxes being tested in this benchmark. The focus is solely on comparing two different ways to check for class presence.

**Benchmark Results**

The latest benchmark results show that `classList.contains()` outperforms `className.indexOf()`, with execution rates of 8.75 and 55.51 executions per second, respectively. This suggests that `classList.contains()` is faster due to its optimized implementation and wider browser support.

**Alternatives**

If you're interested in exploring alternative approaches, here are a few options:

1. **Regular expressions**: You can use regular expressions (e.g., `\btest\b`) to search for the class name. This approach may be slower than `classList.contains()` but provides more flexibility.
2. **Substring searching**: Another approach is to use substring searching (e.g., `element.className.substring(element.className.indexOf("test")) !== "")`. While not as efficient as `classList.contains()`, this method can provide similar results.

Keep in mind that the choice of implementation depends on your specific requirements, performance needs, and browser support considerations.

Related benchmarks:

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

Comparing performance of: className.indexOf vs classList.contains

Created: 6 years ago by: Guest

Jump to the latest result

className.indexOf

classList.contains

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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