Benchmark: ClassName.indexOf and ClassList.contains

HTML Preparation code:

<div id='test'></div>

Script Preparation code:

var test = document.getElementById('test');

Tests:

ClassName
for(i=0; i<100000; i++){ test.className.indexOf('animated') > -1 }
ClassList
for(i=0; i<100000; i++){ test.classList.contains('animated'); }

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: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36

Browser/OS: Chrome 127 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
ClassName	81.7 Ops/sec
ClassList	50.3 Ops/sec

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's being tested, compared, and considered.

**What is being tested?**

The benchmark measures two different approaches to check if a class exists in JavaScript:

1. **`test.className.indexOf('animated') > -1`**: This approach uses the `indexOf()` method of the `className` property of an HTML element. It searches for the string `'animated'` in the element's class list and returns the index of the first occurrence if found.
2. **`test.classList.contains('animated')`**: This approach uses the `contains()` method of the `classList` property, which is a part of the Web APIs introduced in ECMAScript 2017 (ES2017). It checks directly if the element contains the specified class.

**Options compared**

The benchmark compares two options:

1. **`indexOf()` method**: This is the traditional way to check for class existence in older JavaScript implementations.
2. **`classList.contains()` method**: This is a newer, more efficient way to check for class existence introduced in ES2017.

**Pros and Cons of each approach**

* `indexOf()` method:
	+ Pros: Wide browser support, easy to implement.
	+ Cons: Can be slower due to the string search algorithm, may not work correctly with certain class lists (e.g., classes containing special characters).
* `classList.contains()` method:
	+ Pros: Faster execution, more efficient, and less prone to errors.
	+ Cons: Requires support for ES2017 features in older browsers.

**Library/Library usage**

None of the test cases use a library. The `classList` property is a part of the Web APIs.

**Special JS feature/syntax**

The benchmark uses ES2017 features:

* `classList`: Introduced in ECMAScript 2017 (ES2017) as a part of the Web APIs.
* `contains()`: Also introduced in ECMAScript 2017 (ES2017).

**Other alternatives**

If you want to test other approaches, here are some alternative benchmarking options:

1. **`test.className === 'animated'`**: This approach uses strict equality (`===`) to check for class existence.
2. **`test.classList.contains('animated') && test.classList.contains('another-class')`**: This approach checks if the element contains both `'animated'` and another class.
3. **Using a library like `classnames`**: A popular JavaScript library that provides a simple way to manage classes on HTML elements.

Keep in mind that each alternative has its own pros and cons, which you can explore when creating your benchmarking test cases.

Related benchmarks:

ClassName.indexOf and ClassList.contains (version: 1)

Fastest way to find if class exists in JavaScript

Comparing performance of: ClassName vs ClassList

Created: 5 years ago by: Registered User

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