Benchmark: test children matches vs classList vs querySelectorAll vs getElementsByClassName

HTML Preparation code:

<div id="test"></div>

Script Preparation code:

const count = 1000;
const holder = document.getElementById('test');

for (let i = 0; i < count; i++) {
   let elem = document.createElement('div');
   elem.classList.add(0|Math.random()*2 ? 'foo' : 'bar');
   holder.appendChild(elem);
}

Tests:

matches
const result = Array.from(holder.children).filter((node) => node.matches('.foo'));
classList
const result = Array.from(holder.children).filter((node) => node.classList.contains('foo'));
className
const result = Array.from(holder.children).filter((node) => node.className.includes('foo'));
querySelectorAll
const result = holder.querySelectorAll(':scope > .foo');
getElementsByClassName
const result = holder.getElementsByClassName('foo');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
matches
classList
className
querySelectorAll
getElementsByClassName

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64; rv:134.0) Gecko/20100101 Firefox/134.0 r3dfox/134.0.3

Browser/OS: Firefox 134 on Windows 8.1

View result in a separate tab

Test name	Executions per second
matches	3303.7 Ops/sec
classList	4663.2 Ops/sec
className	5392.8 Ops/sec
querySelectorAll	23641.8 Ops/sec
getElementsByClassName	1155218944.0 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark represented in the provided JSON focuses on evaluating the performance of different methods for selecting and filtering DOM elements based on their class attribute. The test aims to compare five approaches used to determine if child elements of a specific container (in this case, `<div id="test"></div>`) contain a certain class (`'foo'`). Below is an overview of each method being used, along with their pros and cons.

### Benchmark Methods Compared

1. **matches**:
    ```javascript
    const result = Array.from(holder.children).filter((node) => node.matches('.foo'));
    ```
   - **Description**: The `matches` method checks if the element matches a specified CSS selector.
   - **Pros**:
     - Very flexible; can use any valid CSS selector.
     - Standardized and part of the DOM API.
   - **Cons**:
     - May have performance overhead compared to more direct approaches for simple class checks.

2. **classList**:
    ```javascript
    const result = Array.from(holder.children).filter((node) => node.classList.contains('foo'));
    ```
   - **Description**: The `classList` property provides a DOMTokenList of the element's classes, allowing you to check for the presence of a specific class.
   - **Pros**:
     - Easy and readable syntax; specifically designed for class manipulations.
     - Faster than `matches`, as it directly checks the class list.
   - **Cons**:
     - Limited to checking for single class names only.

3. **className**:
    ```javascript
    const result = Array.from(holder.children).filter((node) => node.className.includes('foo'));
    ```
   - **Description**: The `className` property returns the string of the element’s classes, which can be searched.
   - **Pros**:
     - Simple direct string manipulation approach.
   - **Cons**:
     - Prone to false positives if class names are substrings of others.
     - Slower than `classList.contains` due to string searching.

4. **querySelectorAll**:
    ```javascript
    const result = holder.querySelectorAll(':scope > .foo');
    ```
   - **Description**: This method finds elements matching a specific selector and returns a static NodeList.
   - **Pros**:
     - Powerful and versatile; can use complex selectors.
     - Can select multiple elements.
   - **Cons**:
     - Performance might be less favorable due to the overhead of selector processing.
     - Produces a NodeList instead of an array, which may require further manipulation.

5. **getElementsByClassName**:
    ```javascript
    const result = holder.getElementsByClassName('foo');
    ```
   - **Description**: This method retrieves a live HTMLCollection of elements with the specified class name.
   - **Pros**:
     - Fastest for selecting elements by a single class name due to its optimized internal implementation.
     - Returns a live collection, which can be beneficial for dynamic content.
   - **Cons**:
     - The live nature of the collection can lead to unexpected results if the DOM changes.
     - Limited to class-based selection only and cannot use complex selectors.

### Benchmark Results Overview

The benchmark results show the number of executions per second for each method in a Chrome 109 environment. The results indicate that:

- **getElementsByClassName** outperforms all other methods significantly, illustrating its optimized performance for class selection.
- **querySelectorAll** and **classList** follow behind but with much lower execution rates, indicating a trade-off between flexibility and performance.
- **matches**, **className**, and **classList** perform relatively slower due to the extra checks or string manipulations they involve.

### Other Alternatives

In addition to the methods tested, there are other general alternatives to consider, such as:

- **CSS frameworks/libraries** like jQuery, which provide their own abstractions and may optimize DOM queries behind the scenes.
- Utilizing custom data attributes or frameworks such as React that manage state and virtual DOM effectively can often minimize direct DOM querying, thereby improving responsiveness and perceived performance in user interfaces.

In summary, this benchmark highlights performance characteristics essential for developers when deciding which method to use for filtering DOM elements based on class names. Each method has its own use cases and trade-offs, and the choice should align with specific application requirements, considering factors like performance, readability, and maintainability.

Related benchmarks:

test children matches vs classList vs querySelectorAll vs getElementsByClassName (version: 1)

Comparing performance of: matches vs classList vs className vs querySelectorAll vs getElementsByClassName

Created: 2 months ago by: Guest

Jump to the latest result

matches

classList

className

querySelectorAll

getElementsByClassName

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