Benchmark: Javascript classList.contains vs element.matches vs classList.some vs classList.every

HTML Preparation code:

<body class="foo bar baz"></body>

Tests:

matches
var i = 1000; while (i--) { if (document.body.matches(".foo.baz")) { return true; } }
classList
var i = 1000; while (i--) { if (document.body.classList.contains('foo') && document.body.classList.contains('baz')) { return true; } }
classList some
var i = 1000; while (i--) { if (['foo', 'baz'].some(className => document.body.classList.contains(className))) { return true; } }
classList every
var i = 1000; while (i--) { if (['foo', 'baz'].every(className => document.body.classList.contains(className))) { return true; } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
matches
classList
classList some
classList every

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
matches	2784863.0 Ops/sec
classList	1666209.2 Ops/sec
classList some	3157385.2 Ops/sec
classList every	1559680.5 Ops/sec

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

LLMs can make mistakes. Check important info.

In this benchmark, four different methods for checking the presence of CSS classes on a DOM element are compared. Each method has its unique approach to evaluating the conditions, and the execution performance is measured in terms of how many times each method can be executed in a second.

### Methods Under Comparison:

1. **Element.matches()**
    ```javascript
    if (document.body.matches(".foo.baz")) { ... }
    ```
    - **Pros**: 
        - Intuitive and concise syntax for checking multiple classes.
        - It leverages the selector engine, which can efficiently match against complex selectors.
    - **Cons**: 
        - Might be slightly slower than direct class checking methods since it processes a selector string.
  
2. **classList.contains() (with multiple checks)**
    ```javascript
    if (document.body.classList.contains('foo') && document.body.classList.contains('baz')) { ... }
    ```
    - **Pros**: 
        - Direct and explicit checks for each class, simple to understand.
        - Can be efficient for a small number of classes since it avoids creating additional arrays.
    - **Cons**: 
        - Less scalable for checking a larger number of classes, leading to increased lines of code and a less clean structure.

3. **Array.some() with classList.contains()**
    ```javascript
    if (['foo', 'baz'].some(className => document.body.classList.contains(className))) { ... }
    ```
    - **Pros**: 
        - Allows for clean and readable code when checking any class from a dynamic list.
        - Provides a way to check if at least one of the specified classes exists.
    - **Cons**: 
        - Slightly less performant than using direct `classList.contains()` due to the overhead of function calls.

4. **Array.every() with classList.contains()**
    ```javascript
    if (['foo', 'baz'].every(className => document.body.classList.contains(className))) { ... }
    ```
    - **Pros**: 
        - Clean syntax for ensuring all specified classes are present.
        - Works well with a dynamic array of class names.
    - **Cons**: 
        - Similar overhead concerns to `Array.some()`, not as performant for very large or static checks.

### Results Overview:

The results from the benchmark indicate the number of executions per second for each method:

- **classList.some**: **3,157,385.25 executions/second**
- **matches**: **2,784,863.00 executions/second**
- **classList.contains (with direct checks)**: **1,666,209.25 executions/second**
- **classList.every**: **1,559,680.50 executions/second**

### Considerations:

- **Performance**: In this benchmark, `classList.some` outperformed the other methods, indicating a more optimized check for some conditions. It allows for neat syntax while still maintaining efficient execution.
- **Convenience vs Performance**: Depending on the scenario, if checking for the presence of one class or many, developers might choose a more readable syntax at the cost of slight performance degradation.
- **Dynamic vs Static Lists**: If the set of classes to check against is dynamic or large, using `Array.some` or `Array.every` provides an elegant solution that enhances maintainability.

### Alternatives:

- **jQuery**: Libraries like jQuery offer methods such as `.hasClass()` for class checks, which can simplify the syntax but may introduce additional overhead due to the library's size.
- **CSS Selectors**: For complex conditions, using combined classes in a single `matches` statement may be the most straightforward and readable option.
- **Native DOM API**: Native methods generally perform better than those of third-party libraries, providing a more efficient way to handle class checks without additional overhead.

In conclusion, the choice among these methods depends largely on the specific needs of an application, including performance requirements and code readability. Each approach has its merits, making it vital for developers to understand the implications of their choices in different contexts.

Related benchmarks:

Javascript classList.contains vs element.matches vs classList.some vs classList.every (version: 1)

Comparing performance of: matches vs classList vs classList some vs classList every

Created: 2 months ago by: Guest

Jump to the latest result

matches

classList

classList some

classList every

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