Benchmark: className.indexOf vs. classList.contains

HTML Preparation code:

<div id="foo" class="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:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36

Browser/OS: Chrome 141 on Linux

View result in a separate tab

Test name	Executions per second
className	69877.9 Ops/sec
classList	22205.9 Ops/sec

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 two approaches to check if an HTML element has a specific class: `className.indexOf()` and `classList.contains()`. The goal is to measure which approach is faster.

**Options Compared**

The benchmark tests two options:

1. **`className.indexOf()`**: This method searches for the specified class within the `className` property of the element.
2. **`classList.contains()`**: This method checks if a specific value exists in the `classList` collection of the element.

**Pros and Cons**

* `className.indexOf()`: Pros:
	+ Lightweight, no additional library needed
	+ Works on older browsers that don't support `classList`
Cons:
	+ May be slower due to string search algorithm
	+ Returns -1 if not found, which may lead to unnecessary checks
* `classList.contains()`: Pros:
	+ Faster and more efficient than `indexOf()`
	+ Returns a boolean value indicating presence or absence
Cons:
	+ Requires the `classList` API, which might be unsupported in older browsers

**Library Usage**

The benchmark uses the `document.getElementById()` function to retrieve an HTML element with the id "foo". This is a standard JavaScript method for retrieving elements by their ID.

**Special JS Feature/Syntax**

None mentioned. Both test cases use standard JavaScript features and syntax.

**Other Considerations**

When writing benchmarks like this, it's essential to consider factors such as:

* Browser support: Ensure that both methods work across different browsers and versions.
* Edge cases: Test for unusual scenarios, like elements with multiple classes or empty class lists.
* Code readability and maintainability: Make sure the benchmark code is clear and easy to understand.

**Alternatives**

If you want to explore alternative approaches, consider these:

1. Use `classList.toggle()` instead of `classList.contains()`. This method adds or removes the specified class from the element's list, which might be faster in some cases.
2. Implement a custom solution using a regular expression or a more optimized string search algorithm.

Keep in mind that microbenchmarking can be complex, and results may vary depending on the specific use case and environment.

I hope this explanation helps!

Related benchmarks:

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

Comparing performance of: className vs classList

Created: 7 years ago by: Guest

Jump to the latest result

className

classList

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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