Benchmark: classList.contains vs className.indexof

HTML Preparation code:

<div id="css" class="css1 css2 css3 css4"></div>

Tests:

classList.contains
document.getElementById('css').classList.contains('css3');
className.indexof
document.getElementById('css').className.indexOf('css3');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
classList.contains
className.indexof

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON and explain what is being tested.

**Benchmark Purpose:**
The benchmark measures the performance difference between two approaches for checking if an element contains a specific class name:

1. `classList.contains()`
2. `className.indexOf()` (also referred to as "className.indexof" in some cases, which is not a standard JavaScript method)

**Options Compared:**

* `classList.contains()`: This method is part of the DOM API and allows you to check if an element contains a specific class name.
* `className.indexOf()`: This is not a standard JavaScript method. It seems to be a custom implementation or a typo, as there is no such method in JavaScript.

**Pros and Cons:**

* `classList.contains()`:
	+ Pros:
		- Part of the DOM API, which means it's built-in and should be optimized for performance.
		- Easy to use and understand.
	+ Cons:
		- May require additional setup or modifications if used with certain libraries or frameworks.
* `className.indexOf()` (assuming this is a typo):
	+ Pros: None apparent, as this method is not standard JavaScript.
	+ Cons:
		- Likely to be slower due to custom implementation or incorrect usage of the method.

**Other Considerations:**

* The benchmark uses an HTML element with multiple class names to simulate real-world scenarios.
* The test cases are designed to measure performance rather than accuracy, which might lead to differences in results depending on the specific use case.

**Library Usage:**
None apparent. The benchmark only uses standard JavaScript and DOM API methods.

**Special JS Features or Syntax:**
No special features or syntax are mentioned. However, it's worth noting that `classList.contains()` is a part of the ECMAScript 2015 (ES6) specification, which might affect performance in older browsers.

**Alternatives:**

* If you're looking for alternative methods to check if an element contains a specific class name:
	+ Use the `querySelector` method with a CSS selector, e.g., `document.querySelector('.css3')`.
	+ Implement a custom loop or recursive function to iterate through class names.
* Consider using a library or framework that provides optimized class name checking functionality.

In summary, the benchmark measures the performance difference between two approaches for checking if an element contains a specific class name. The `classList.contains()` method is the recommended approach due to its part in the DOM API and ease of use.

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36

Browser/OS: Chrome 118 on Windows

View result in a separate tab

Test name	Executions per second
classList.contains	1643375.9 Ops/sec
className.indexof	1878802.2 Ops/sec

Related benchmarks:

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

Comparing performance of: classList.contains vs className.indexof

Created: one year ago by: Registered User

Jump to the latest result

classList.contains

className.indexof

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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