Benchmark: className.includes vs. classList.contains vs matches

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"); }
matches
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.matches(".test"); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
className
classList
matches

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64; rv:109.0) Gecko/20100101 Firefox/115.0

Browser/OS: Firefox 115 on Windows 8.1

View result in a separate tab

Test name	Executions per second
className	17007.6 Ops/sec
classList	1091318.4 Ops/sec
matches	10880.8 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):

LLMs can make mistakes. Check important info.

This benchmark compares three different approaches to check if an HTML element has a certain class name. The target element in the benchmark is a `<div>` with the class `"test"`, and the methods being tested are `className.includes`, `classList.contains`, and `element.matches`.

### Approaches Compared

1. **`className.includes("test")`**
   - **Description**: This method converts the `className` string into a standard string and uses the JavaScript `String.prototype.includes()` method to check if it contains the substring `"test"`.
   - **Pros**:
     - It's straightforward and can be used in any situation where you have a class name string.
   - **Cons**:
     - It does a substring search, which means if you have class names like `"test-something"` or ` "something-test"`, this method would return true, leading to inaccurate results.
     - Performance can be lower as substring searches can get computationally expensive.

2. **`classList.contains("test")`**
   - **Description**: This is a method provided by the `classList` property of an HTML element. It specifically checks for the presence of a class within the class list without the risk of incorrect substring matching.
   - **Pros**:
     - More accurate, as it only checks for full class names and does not have the substring issue found in the `className` approach.
     - Generally faster due to more efficient underlying implementations.
   - **Cons**:
     - Requires the browser to support the `classList` API, although this is widely supported in modern browsers.

3. **`element.matches(".test")`**
   - **Description**: This method checks if the element would be selected by a specific CSS selector (in this case, checking if it has the class `"test"`).
   - **Pros**:
     - Very flexible and powerful as it allows the use of complex selectors, which can check for multiple classes or other attributes in conjunction.
     - Can also be used for more advanced CSS selector syntax.
   - **Cons**:
     - Performance may not be as optimized for simple class checks compared to `classList.contains`.
     - Slightly more overhead since it parses the selector string using the CSS selector engine.

### Benchmark Results
In the recent benchmark results:
- **`classList.contains`** achieved the highest performance, with **1,091,318.375 Executions Per Second**.
- **`className.includes`** yielded **17,007.5859375 Executions Per Second**, showing significantly lower performance likely due to the substring search.
- **`matches`** performed the lowest with **10,880.830078125 Executions Per Second**, although it's worth noting that the flexibility of CSS selectors provides added power at the cost of performance in this case.

### Considerations
- Developers should choose the method based on their specific needs; for mere class presence checks, `classList.contains` is clearly the best option. 
- The `className` approach might still be useful in scenarios where strings need to be thoroughly examined, but it’s crucial to avoid incorrect assumptions about class presence.
- The `matches` method is best when working with complex selectors or requiring full CSS capability, despite its slower performance for simple class checks.

### Alternatives
Beyond the three methods tested, other approaches could include:
- **Using regex with `className`**: Allows for more complex matching but sacrifices readability and performance.
- **jQuery's `hasClass` method**: Provides a widely known abstraction over the similar functionality, but introduces the overhead of using a library, which might be undesirable in lightweight applications.
- Custom utility functions that check as needed, though these would need to be optimized for performance and accurately reflect checks you'd achieve with `classList`.

In conclusion, when performance is a critical concern, especially for repetitive class checks in a performance-sensitive environment, sticking to `classList.contains` is advisable.

Related benchmarks:

className.includes vs. classList.contains vs matches (version: 1)

Comparing performance of: className vs classList vs matches

Created: 2 months ago by: Guest

Jump to the latest result

className

classList

matches

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):