Benchmark: className.indexOf vs. classList.contains 3

HTML Preparation code:

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

Tests:

className
var element = document.getElementById("foo"); var i = 1000; while (i--) { (( ' ' + 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 break down the benchmark and explain what is being tested.

**Benchmark Overview**

The benchmark compares two approaches to check if an HTML element has a specific class: `indexOf` vs. `classList.contains`. The test case uses a simple HTML structure with a single div element, and a JavaScript script that runs a loop 1000 times, repeatedly checking the presence of a specific class.

**Options Compared**

The benchmark compares two options:

1. **`className.indexOf("test") > -1`**: This approach uses the `indexOf` method to search for the string "test" within the value of the `className` property of an HTML element. If the string is found, the method returns a non-negative index; otherwise, it returns -1.
2. **`element.classList.contains("test")`**: This approach uses the `classList.contains()` method to check if the "test" class is present in the list of classes associated with an HTML element.

**Pros and Cons**

* **`indexOf` approach**:
	+ Pros: generally faster, as it's a simple string search.
	+ Cons: may not work correctly when dealing with non-string values (e.g., `null`, `undefined`) in the `className` property, which can lead to unexpected results.
* **`classList.contains()` approach**:
	+ Pros: more robust and predictable, as it uses a specific method designed for class list operations.
	+ Cons: may be slightly slower due to the overhead of calling a method.

**Library Used**

In this benchmark, the `classList` property is used in conjunction with the `contains()` method. The `classList` property is a standard HTML5 feature that allows you to interact with an element's class list. It provides several methods for working with classes, including `contains()`, which checks if a specific value is present in the class list.

**Special JS Feature or Syntax**

None of the test cases use any special JavaScript features or syntax beyond the standard language.

**Other Considerations**

When running this benchmark, it's essential to consider the following:

* The browser and version used for testing can significantly affect performance.
* The `className` property may contain other classes besides "test", which can influence the results.
* The use of `indexOf()` can lead to slower performance when dealing with large class lists or when the element has no classes.

**Alternative Approaches**

Some alternative approaches to check if an HTML element has a specific class include:

1. Using the `querySelector` method, which is generally faster than `indexOf`. However, it requires that you use a CSS selector.
2. Using a library like jQuery, which provides a `hasClass()` method for checking classes.
3. Implementing your own custom solution using bitwise operations or regular expressions.

Keep in mind that these alternatives may have different performance characteristics and might not be as straightforward to implement as the `classList.contains()` approach.

Related benchmarks:

className.indexOf vs. classList.contains 3 (version: 1)

Comparing performance of: className vs classList

Created: 4 years ago by: Registered User

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