Benchmark: test children matches vs classList vs querySelectorAll vs getElementsByClassName v.2

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 (filter)
const result = Array.from(holder.children).filter((node) => node.matches('.foo'));
matches (for)
const result = []; for (const child of holder.children) { if (child.matches('.foo')) result.push(child); }
classList (filter)
const result = Array.from(holder.children).filter((node) => node.classList.contains('foo'));
classList (for)
const result = []; for (const child of holder.children) { if (child.classList.contains('foo')) result.push(child); }
className (filter)
const result = Array.from(holder.children).filter((node) => node.className.includes('foo'));
className (for)
const result = []; for (const child of holder.children) { if (child.className.includes('foo')) result.push(child); }
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 (filter)
matches (for)
classList (filter)
classList (for)
className (filter)
className (for)
querySelectorAll
getElementsByClassName

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36

Browser/OS: Chrome 133 on Windows

View result in a separate tab

Test name	Executions per second
matches (filter)	8952.5 Ops/sec
matches (for)	9170.2 Ops/sec
classList (filter)	9124.8 Ops/sec
classList (for)	8520.9 Ops/sec
className (filter)	9145.6 Ops/sec
className (for)	9226.5 Ops/sec
querySelectorAll	77337.5 Ops/sec
getElementsByClassName	25232930.0 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided benchmark focuses on evaluating the performance of various methods for selecting DOM elements based on their class names. Specifically, the benchmark compares the following options for selecting elements with the class name "foo":

1. **Using `matches` Method with Filter**: 
   - **Definition**: `Array.from(holder.children).filter((node) => node.matches('.foo'))`
   - **Description**: This method transforms the `holder.children` HTMLCollection into an array and uses the `filter` method to return elements that match the specified selector using the `matches` method.
   - **Pros**: Readable code and leverages array methods.
   - **Cons**: Iterating over children and applying a selector can be slower than direct queries due to the overhead of creating an array.

2. **Using `matches` Method with For Loop**: 
   - **Definition**: `for (const child of holder.children) { if (child.matches('.foo')) result.push(child); }`
   - **Description**: This method iterates through `holder.children` and checks each child for a match using the `matches` method.
   - **Pros**: More straightforward than converting to an array; potentially faster since it avoids additional array operations.
   - **Cons**: Less syntactic convenience compared to using array methods.

3. **Using `classList.contains` Method with Filter**: 
   - **Definition**: `Array.from(holder.children).filter((node) => node.classList.contains('foo'))`
   - **Description**: Similar to the first method but uses `classList.contains` to check for the presence of the class.
   - **Pros**: Efficient in checking class presence without the overhead of selector matching; readable.
   - **Cons**: Still incurs overhead from creating an array.

4. **Using `classList.contains` Method with For Loop**: 
   - **Definition**: `for (const child of holder.children) { if (child.classList.contains('foo')) result.push(child); }`
   - **Description**: Iterates through children and checks class names using `classList.contains`.
   - **Pros**: Simple implementation which may be fast for a large number of children.
   - **Cons**: Similar simplicity issue as above.

5. **Using `className.includes` Method with Filter**: 
   - **Definition**: `Array.from(holder.children).filter((node) => node.className.includes('foo'))`
   - **Description**: Uses string `includes` method to check if the class string contains "foo".
   - **Pros**: Works even if class names are not separated properly; straightforward.
   - **Cons**: Can yield false positives if 'foo' is part of another class name. Additionally, it relies on parsing the string representation, which is more error-prone.

6. **Using `className.includes` Method with For Loop**: 
   - **Definition**: `for (const child of holder.children) { if (child.className.includes('foo')) result.push(child); }`
   - **Description**: A loop version of the previous method.
   - **Pros**: Efficient in terms of iteration without creating an array.
   - **Cons**: Same risks as above with false positives.

7. **Using `querySelectorAll`**:
   - **Definition**: `holder.querySelectorAll(':scope > .foo')`
   - **Description**: Leverages CSS selectors to select child elements with class "foo".
   - **Pros**: It allows complex selections and is very readable; can easily adapt to other selectors.
   - **Cons**: Performance can vary based on the structure of the DOM; could be slower than direct methods on a large scale.

8. **Using `getElementsByClassName`**:
   - **Definition**: `holder.getElementsByClassName('foo')`
   - **Description**: A direct method to retrieve all elements with the specified class name.
   - **Pros**: Generally very fast as it directly accesses the elements based on class name without any additional iteration or filtering.
   - **Cons**: Returns a live HTMLCollection, which can be a problem if the DOM is mutated during iteration.

### Results Overview

From the benchmark results, `getElementsByClassName` performs the best with a significantly higher number of executions per second compared to other methods, indicating it is the most efficient for this specific operation. Conversely, methods using `matches` and class filtering with arrays yield much lower performance.

### Alternatives
- **Direct DOM Manipulation**: For specific tasks, directly manipulating the DOM may sometimes outweigh the performance of complex selectors or filters.
- **Virtual DOM Techniques**: In frameworks like React, using the virtual DOM may alter how these comparisons play out, as it abstracts the direct manipulation of DOM nodes.
- **Using Libraries**: Libraries like jQuery simplify many of these tasks but may add overhead compared to native methods.

### Conclusion
This benchmark shines a light on the trade-offs between readability and performance. For optimized performance, especially with dynamic or large DOM structures, `getElementsByClassName` is a strong choice, while `querySelectorAll` and `matches` provide flexibility and ease of use in less performance-critical situations.

Related benchmarks:

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

Comparing performance of: matches (filter) vs matches (for) vs classList (filter) vs classList (for) vs className (filter) vs className (for) vs querySelectorAll vs getElementsByClassName

Created: 2 months ago by: Guest

Jump to the latest result

matches (filter)

matches (for)

classList (filter)

classList (for)

className (filter)

className (for)

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