Benchmark: className.indexOf vs. classList.contains 1

HTML Preparation code:

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

Script Preparation code:

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

Tests:

className
element.className.indexOf("test")
classList
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.

I'll break down the provided JSON data and explain what's being tested, compared, and its pros/cons.

**Benchmark Definition**

The benchmark is designed to compare the performance of two ways to check if an element has a specific class: `className.indexOf` and `classList.contains`.

**Script Preparation Code**

The script preparation code creates an HTML element with the ID "foo" and assigns it to the variable `element`. The element also has a class attribute set to "test".

**Html Preparation Code**

The HTML preparation code generates a simple HTML structure with a div element that has the ID "foo" and the class "test".

**Test Cases**

There are two test cases:

1. **className**: This test case uses `element.className.indexOf("test")`. The `indexOf` method returns the index of the first occurrence of the specified string within the string's characters. If no match is found, it returns -1.
2. **classList**: This test case uses `element.classList.contains("test")`. The `contains` method returns a boolean value indicating whether the element has a specific class.

**Comparison**

The benchmark compares the performance of these two approaches on the same set of HTML elements with the "test" class.

**Pros and Cons:**

1. **className.indexOf**:
	* Pros:
		+ Widely supported in older browsers.
		+ Can be used for searching substrings within a string.
	* Cons:
		+ Less efficient than `classList.contains` because it searches for the substring, which can lead to slower performance.
		+ May return incorrect results if the class name is not unique or if there are other classes present.
2. **classList.contains**:
	* Pros:
		+ More efficient and accurate than `className.indexOf`.
		+ Specifically designed for checking class presence.
	* Cons:
		+ Less supported in older browsers.

**Library**

There is no explicit library mentioned in the benchmark definition, but `element.classList` uses the Web APIs introduced by HTML5. The `classList` property provides a set of methods and properties to work with classes on elements.

**Special JS Feature/Syntax:**

The benchmark does not use any special JavaScript features or syntax beyond what's supported by standard Web APIs.

**Alternatives**

Other alternatives for checking class presence include:

1. Using the `getAttribute` method with the "class" attribute, e.g., `element.getAttribute("class")`.
2. Using a regular expression to search for the class name.
3. Using a library like Lodash's `includes` function.

Keep in mind that these alternatives may have different performance characteristics and compatibility across browsers.

Related benchmarks:

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

Comparing performance of: className vs classList

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