Benchmark: native fastest selector

HTML Preparation code:

<div id="root"></div>

Script Preparation code:

let root = document.querySelector('#root');
for(let n=1; n<=1000; n++)
	root.insertAdjacentHTML("beforeend", '\n<div class="outer"><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div class="inner">Test</div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>');

Tests:

root.querySelectorAll "div"
let root = document.querySelector('#root'); root.querySelectorAll('div');
root.querySelectorAll ".outer"
let root = document.querySelector('#root'); root.querySelectorAll('.outer');
document.querySelectorAll "#root > .outer"
document.querySelectorAll('#root > .outer');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
root.querySelectorAll "div"
root.querySelectorAll ".outer"
document.querySelectorAll "#root > .outer"

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 13 days ago)

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

Browser/OS: Chrome 128 on Windows

View result in a separate tab

Test name	Executions per second
root.querySelectorAll "div"	6055.8 Ops/sec
root.querySelectorAll ".outer"	11729.9 Ops/sec
document.querySelectorAll "#root > .outer"	9195.6 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 12 days ago):

LLMs can make mistakes. Check important info.

The benchmark represented by the provided JSON focuses on testing the performance of different methods for selecting elements in the DOM (Document Object Model) using JavaScript. Specifically, it evaluates various invocation styles of the `querySelectorAll` method on a populated DOM tree.

### Benchmark Setup

#### Preparation Code
1. **HTML Structure**: The setup initializes a `div` with the id `root` in which 1000 nested `div` elements are created. The inner-most `div` has a class of `inner` and a text node "Test".
2. **JavaScript Configuration**: The script runs a loop that dynamically appends these nested elements to the `root`.

### Test Cases
The benchmark consists of three test cases:

1. **`root.querySelectorAll("div")`**:
   - **Description**: This selects all `div` elements within the `root` element.
   - **Considerations**: It will likely return all descendant `div` elements spanning an extensive hierarchy (1000 nested `div`s).
   - **Pros**: Simple and straightforward selector.
   - **Cons**: Returns the largest number of elements, which means potentially slower performance due to processing time for a larger result set.

2. **`root.querySelectorAll(".outer")`**:
   - **Description**: This selects all `div` elements with the class `outer` within the `root`.
   - **Considerations**: Despite `div`'s nesting, in this specific case, only the outer `div` layers will be counted (those with class `outer`).
   - **Pros**: More efficient than selecting all `div`s since it targets a specific subset, reducing the number of elements returned.
   - **Cons**: Requires the class to be present and accurately named; doesn't capture nested `div` elements without the `outer` class.

3. **`document.querySelectorAll("#root > .outer")`**:
   - **Description**: This uses a direct child selector, targeting only `div.outer` elements that are immediate children of `#root`.
   - **Considerations**: This approach is highly efficient as it focuses on a narrower context, only selecting elements directly under the `root`.
   - **Pros**: Potentially the fastest performance, as it reduces the number of elements traversed and matched.
   - **Cons**: This is restrictive; it will not register any deeper nested `div.outer` elements that aren't immediate children.

### Performance Analysis

The latest benchmark results show the number of executions per second for each test case, revealing:

- **Fastest Selector**: `root.querySelectorAll(".outer")` with approximately 11,730 executions per second, indicating that the method benefits from class targeting.
- **Second Best**: `document.querySelectorAll("#root > .outer")` with around 9,196 executions per second, demonstrating efficiency with direct child targeting.
- **Slowest**: `root.querySelectorAll("div")` at about 6,056 executions per second, which is not surprising given it has to process the most extensive set.

### Other Considerations
- **Scalability**: Each method's performance may vary with different DOM sizes. The results are particularly relevant for performance optimization in applications displaying large datasets.
- **Selector Complexity**: While these benchmarks focus on basic selectors, more complex CSS selectors can result in different performance impacts.
- **Browser Variability**: The results may differ across browsers due to variances in DOM implementation and JavaScript engine optimization.

### Alternatives
Beyond using `querySelectorAll`, JavaScript developers can consider:
1. **`getElementsByClassName`**: Returns live HTML collections of elements with the specified class name. Faster than `querySelectorAll` for class-based selections but doesn't provide the same flexibility for more complex queries.
2. **`getElementsByTagName`**: Fast for tag-based selections, returning live collections but limited in targeting only by the tag name.
3. **`document.getElementById`**: Very fast for single or known ID selections, reducing overhead when working with specific elements.
4. **Performance Libraries**: Libraries such as jQuery abstract away the underlying mechanics but can introduce overhead compared to raw JavaScript selectors.

This benchmark and its results serve as a helpful guide for engineers looking to optimize DOM interactions in JavaScript, with an emphasis on understanding the implications of different selector methods on performance.

Related benchmarks:

native fastest selector (version: 2)

Comparing performance of: root.querySelectorAll "div" vs root.querySelectorAll ".outer" vs document.querySelectorAll "#root > .outer"

Created: 13 days ago by: Registered User

Jump to the latest result

root.querySelectorAll "div"

root.querySelectorAll ".outer"

document.querySelectorAll "#root > .outer"

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 12 days ago):