Benchmark: closest comparision

HTML Preparation code:

<div class="a">
<div class="b">
<div class="c">
<div class="d">
<div class="d">
<div class="e">
<div class="f">
<div class="g">
<div class="h">
<div class="i">
<div class="j">
<div class="k">
<div class="l">
<div class="m">
<div class="n">
<div class="o">
<div class="p">
<div class="q">
<div class="r">
<div class="s">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Script Preparation code:

/*your preparation JavaScript code goes here
To execute async code during the script preparation, wrap it as function globalMeasureThatScriptPrepareFunction, example:*/
async function globalMeasureThatScriptPrepareFunction() {
  element = document.querySelector('.s')
}

Tests:

closest loop
['aa', 'bb', 'cc', 'dd', 'ee', 'ff'].forEach(letter => element.closest(`.${letter}`))
closest comma
element.closest(`.aa, .bb, .cc, .dd, .ee, .ff`)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
closest loop
closest comma

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
closest loop	637472.1 Ops/sec
closest comma	1081359.2 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark provided tests the performance of different approaches for finding the closest ancestor element in the DOM that matches a given selector. It uses the `Element.closest()` method in JavaScript.

### Benchmark Options Compared

1. **Closest Loop**
   - **Benchmark Definition**: This approach utilizes a `forEach` loop to iterate over an array of class names (['aa', 'bb', 'cc', 'dd', 'ee', 'ff']) and calls the `closest()` method on the target element for each class.
   - **Test Name**: "closest loop"

2. **Closest Comma**
   - **Benchmark Definition**: This approach calls the `closest()` method once with a comma-separated string of selectors ('.aa, .bb, .cc, .dd, .ee, .ff'). The `closest()` function checks all classes in one go.
   - **Test Name**: "closest comma"

### Performance Results

- The "closest comma" benchmark yielded significantly higher performance, executing at approximately 1,081,359.25 executions per second.
- The "closest loop" benchmark executed at a rate of approximately 637,472.06 executions per second.
- The **closest comma** approach was about 1.7 times faster than the **closest loop** approach.

### Pros and Cons of Each Approach

#### Closest Loop:
- **Pros**:
  - More straightforward to implement if you have complex logic to determine which class to use.
  - Easier to perform additional actions for each closest search.
  
- **Cons**:
  - Lower performance due to multiple calls to `closest()` and the overhead of iterating through an array.
  - Each call may separately traverse the DOM tree, which incurs a performance overhead.

#### Closest Comma:
- **Pros**:
  - Superior performance as it reduces multiple DOM traversals to a single call.
  - More concise code since it evaluates multiple selectors in one string, minimizing overhead.
  
- **Cons**:
  - Less flexibility as you cannot incorporate conditional logic for each selector easily.
  - If you require dynamic behavior based on conditions for each selector, a more complex solution may be needed.

### Other Considerations

- **Element.closest()**: This method is beneficial because it stops climbing the DOM and returns the first element that matches the specified selector. It works for any valid CSS selector and helps prevent common errors when manually navigating the DOM.
- Benchmarking with different libraries or frameworks that might abstract DOM access could also be considered, but the native JavaScript method provides performance benefits when directly interacting with the DOM.

### Alternatives

1. **Using jQuery**: While jQuery provides a `closest()` method that abstracts away browser inconsistencies and simplifies DOM manipulation, it typically adds more overhead compared to native methods, particularly if you're only working with straightforward use cases where performance is vital.

2. **Manual DOM Traversal**: Developers can implement manual logic to traverse the DOM tree to find the closest parent that meets a condition, but this approach is rarely as efficient or clean as using `closest()`.

3. **Performance Libraries**: Libraries dedicated to performance measures and DOM handling (like lodash) can provide optimized methods, but they may not reach the performance levels of native methods due to added abstractions.

In summary, for efficiency and leveraging browser optimizations, using the `Element.closest()` method with a comma-separated string of selectors appears to be the superior choice in this benchmark scenario.

Related benchmarks:

closest comparision (version: 1)

Comparing performance of: closest loop vs closest comma

Created: one year ago by: Guest

Jump to the latest result

closest loop

closest comma

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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