Benchmark: className.indexOf vs. classList.contains2

HTML Preparation code:

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

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
className
classList

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Overview**

The benchmark compares the performance of two approaches to check if an element has a specific class: `indexOf` and `classList.contains`. The test case uses a simple HTML snippet with a div element, and the script preparation code is minimal, which means it only includes the necessary setup for the benchmark.

**Options Compared**

There are two options being compared:

1. **`className.indexOf`**: This method searches for the specified class name within the `className` property of the element's class list. It returns the index of the first occurrence of the class name if found, or -1 if not.
2. **`classList.contains`**: This method checks if the element's class list contains the specified class name. If it does, it returns `true`, otherwise it returns `false`.

**Pros and Cons**

* `className.indexOf`:
	+ Pros: lightweight and simple to implement.
	+ Cons: can be slower for large class lists or when searching for multiple classes.
* `classList.contains`:
	+ Pros: more efficient than `indexOf` for large class lists, and it also allows for checking multiple classes at once.
	+ Cons: requires the element's class list to exist, which may not always be the case (e.g., if the class is dynamically added).

**Library Use**

In this benchmark, there is no explicit library used. However, `classList` is a part of the Web APIs, which are built-in to modern browsers.

**Special JS Features/Syntax**

There is no special JavaScript feature or syntax being tested in this benchmark. The code snippets are straightforward and do not utilize any advanced JavaScript concepts.

**Alternative Approaches**

If you're interested in alternative approaches for checking if an element has a specific class, here are a few:

1. **Using `Array.prototype.includes`**: This method can be used to check if the element's class list contains the specified class name.
2. **Using `String.prototype.indexOf` with a regular expression**: This approach can be used to search for multiple classes at once using a regular expression.

Here's an example of how you could rewrite the benchmark using `Array.prototype.includes`:
```javascript
var i = 1000;
while (i--) {
  var element = document.getElementById("foo");
  if (element.classList[Symbol.iterator]().next().value.includes("test")) {}
}
```
And here's an example of how you could rewrite it using `String.prototype.indexOf` with a regular expression:
```javascript
var i = 1000;
while (i--) {
  var element = document.getElementById("foo");
  if (/test/.test(element.className)) {}
}
```
Keep in mind that these alternative approaches may have different performance characteristics and may not be as efficient as the original `classList.contains` method.

Related benchmarks:

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

Comparing performance of: className vs classList

Created: 3 years ago by: Guest

Jump to the latest result

className

classList

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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