Benchmark: className.includes 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.includes("test")) {} }
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: 11 months ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/115.0

Browser/OS: Firefox 115 on Linux

View result in a separate tab

Test name	Executions per second
className	12350.9 Ops/sec
classList	1036270.0 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 provided JSON benchmark and explain what is tested, compared options, pros and cons, and other considerations.

**Benchmark Definition**

The benchmark measures the performance difference between two approaches to check if an element has a certain class: `className.includes()` vs. `classList.contains()`. The benchmark is designed to test how efficient these methods are in a JavaScript loop with 1000 iterations.

**Options Compared**

Two options are compared:

1. **`className.includes()`**: This method checks if the element's `className` property contains the specified string (`"test"`).
2. **`classList.contains()`**: This method returns a boolean indicating whether the specified class is present in the element's `classList`.

**Pros and Cons of Each Approach**

* **`className.includes()`**:
	+ Pros: Generally faster, as it only checks for substring presence.
	+ Cons: May be slower if the `className` property is very large or contains many characters.
* **`classList.contains()`**:
	+ Pros: Can be more readable and intuitive, especially in modern browsers where `classList` is a standard feature.
	+ Cons: May be slower due to the additional overhead of checking the `classList`.

**Other Considerations**

The benchmark assumes that both methods are called within a loop, which can impact performance. Additionally, the benchmark does not account for other factors like element creation, DOM manipulation, or asynchronous operations that might affect performance.

**Library and Special JS Features**

None of the test cases rely on external libraries or special JavaScript features beyond standard JavaScript syntax.

**Alternatives**

If you're interested in exploring alternative approaches, consider the following:

* **`element.matches()`**: Introduced in modern browsers (Edge 16+, Chrome 55+, Firefox 49+), this method provides a more efficient and standardized way to check class presence. However, it may not be supported in older browsers.
* **Using `Array.prototype.includes()`**: You can also use the built-in `includes()` method on an array of classes to achieve similar results. This approach is generally faster than using `className.includes()` or `classList.contains()`, but requires more code and might be less readable.

Keep in mind that these alternatives may not provide a significant performance difference for this specific benchmark, as the loop size is relatively small (1000 iterations).

Related benchmarks:

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

Comparing performance of: className vs classList

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