Benchmark: closest vs querySelector performance for very large dom

closest vs querySelector performance for very large dom (version: 1)

Goal: Get the target element inside the DOM Test case #1 - You don't have the target id - Find a target element through DOM via Element.closest() Test case #2 - You have the target id from your state - Find the target element via Document.querySelector()

Comparing performance of: `closest vs querySelector`

Created: one year ago by: Guest

Go to the latest result

HTML Preparation code:

<div><div><div>

<div data-parent="parent-id">
<div><div><div><div><div><div><div><div><div><div><div><div>

    <div data-target="target-id">

      <div><div>

        <div data-clicked="clicked-id"></div>

      </div></div>

    </div>
</div></div></div></div></div></div></div></div></div></div></div></div>
</div>

</div></div></div>

Script Preparation code:

var clicked = document.querySelector('[data-clicked]')
var parentEl = document.querySelector('[data-parent="parent-id"]')

Tests:

closest
clicked.closest('[data-target]')
querySelector
parentEl.querySelector('[data-target="target-id"]')

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
closest
querySelector

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 132 on Windows

View result in a separate tab

querySelector

8.5M/s

closest

6.9M/s

View exact numbers

Test name	Executions per second
✓ querySelector	8,516,664 Ops/sec
closest	6,944,332 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

LLMs can make mistakes. Check important info.

In this benchmark, two different methods for selecting elements in a large DOM structure are tested: `Element.closest()` and `Document.querySelector()`. The goal is to compare their performance in finding a target element within the DOM under specific conditions.

### Method Descriptions

1. **Element.closest()**:
   - **Usage**: This method is used in `clicked.closest('[data-target]')`.
   - **Description**: `closest()` traverses up the DOM tree from the context of the element it is called on (in this case, the element with `data-clicked="clicked-id"`). It searches for the nearest ancestor (including itself) that matches the provided selector (`'[data-target]'`).
   - **Pros**:
     - It allows for a more flexible search, potentially avoiding overhead by only needing to traverse upward.
     - It can be handy when the target element is nested and is not known beforehand.
   - **Cons**:
     - If the target element is far from the starting point in the DOM structure, it may end up traversing many nodes before finding a match, which could impact performance.
  
2. **Document.querySelector()**:
   - **Usage**: This method is utilized in `parentEl.querySelector('[data-target="target-id"]')`.
   - **Description**: `querySelector()` selects the first element within the document that matches a specified CSS selector. Here, it's called on `parentEl`, which is a known parent element containing the target.
   - **Pros**:
     - It directly targets the known structure, which can lead to faster lookups since it only searches within the context of `parentEl`.
     - If you know the structure and can utilize DOM element IDs or other specific attributes, it may yield better performance.
   - **Cons**:
     - If you do not have a reference to the parent or the target is not readily identified, it requires additional steps or context information.

### Comparison of Test Results
According to the benchmark results:
- `querySelector` achieved **8,516,664 Executions Per Second**,
- while `closest` achieved **6,944,332 Executions Per Second**.

### Overall Considerations
- **Performance**: The benchmark clearly indicates that `querySelector` is significantly faster in this specific context. This may be attributed to its direct targeting mechanism compared to the potentially extensive traversal of `closest`.
- **Use Cases**: The choice between these methods can depend on the specific scenarios. If the element is known and you have access to its parent, `querySelector` is the better option. In contrast, if you find yourself working with deeply nested structures where direct access isn't feasible, `closest` might be beneficial.

### Alternatives
- **getElementById()**: If the target has an ID, using `document.getElementById('target-id')` can be the fastest option, as this method is optimized for ID lookups in the DOM.
- **getElementsByClassName() / getElementsByTagName()**: These methods can also be faster depending on the context but have limitations since they do not support selector strings like `querySelector`.
  
### Conclusion
This benchmark provides valuable insights into performance characteristics of DOM traversal methods in the JavaScript environment, helping developers make informed decisions based on the context of element selection in their applications.