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"); }

Historical Performance Data aggregated from 18 community runs

Desktop Results:

Chrome 13 runs

className

49K/s

classList

15K/s

Fastest: className (3.3x faster)

View exact numbers

✓ className: 49,392 ops/sec
• classList: 15,015 ops/sec

Firefox 5 runs

classList

885K/s

className

237K/s

Fastest: classList (3.7x faster)

View exact numbers

✓ classList: 884,795 ops/sec
• className: 236,678 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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 (X11; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/115.0

Browser/OS: Firefox 115 on Linux

View result in a separate tab

classList

1.0M/s

className

12K/s

View exact numbers

Test name	Executions per second
✓ classList	1,036,270 Ops/sec
className	12,351 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).

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

Comparing performance of: `className vs classList`

Created: 3 years ago by: Guest

Go to the latest result

className

classList

Historical Performance Data aggregated from 18 community runs

Desktop Results:

Chrome 13 runs

Firefox 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

Comparing performance of: className vs classList

Created: 3 years ago by: Guest

Go to the latest result

className

classList

Historical Performance Data aggregated from 18 community runs

Desktop Results:

Chrome 13 runs

Firefox 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `className vs classList`