Benchmark: closest comparision 2

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	731776.9 Ops/sec
closest comma	1074021.6 Ops/sec

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

LLMs can make mistakes. Check important info.

### Benchmark Overview

The benchmark is testing the performance of two different approaches for finding the closest ancestor of a specified element in a DOM structure using the `Element.closest()` method in JavaScript. Both tests compare how quickly this method can locate elements based on CSS selectors when executed multiple times.

### Test Cases

1. **Closest Loop**
   - **Benchmark Definition**: `['.aa', '.bb', '.cc', '.dd', '.ee', '.ff'].forEach(letter => element.closest(letter))`
   - **Description**: This test uses an array of CSS class selectors to find the closest ancestor element for each selector individually. It runs a loop where `element.closest(letter)` is called for each class in the array.

2. **Closest Comma**
   - **Benchmark Definition**: `element.closest('.aa, .bb, .cc, .dd, .ee, .ff')`
   - **Description**: This test utilizes a single call to `element.closest()` with a string of comma-separated selectors. This method retrieves the closest ancestor that matches any of the specified selectors in one go.

### Pros and Cons

#### Closest Loop
- **Pros**:
  - Provides flexibility; you can perform additional operations for each selector if necessary in the loop.
  - Easy to understand, as each call is separate and can utilize different logic for each iteration.
  
- **Cons**:
  - Performance may suffer due to repeated calls to `closest()`, which can be computationally expensive, especially in a loop.
  - More verbose code, which might introduce additional overhead compared to a single function call.

#### Closest Comma
- **Pros**:
  - Likely to have better performance due to a single invocation of the method that processes all selectors at once.
  - Less code and a more concise approach to finding the closest match.
  
- **Cons**:
  - Limited extensibility; once you pass the argument, you cannot easily apply different logic for each selector.

### Performance Results

The benchmark results indicate that the **Closest Comma** approach performed significantly better than the **Closest Loop** approach:
- **Closest Comma**: 1,074,021.625 executions per second
- **Closest Loop**: 731,776.875 executions per second

This shows that using a single call to `closest()` with multiple selectors (comma-separated) is more efficient in terms of execution speed when compared to iterating through a list of selectors one by one.

### Other Considerations

When conducting such benchmarks, it's essential to consider the environment in which the tests are run. Factors like browser version, operating system, and even the device being used may affect performance. In this case, all tests were executed on a specific version of Chrome on a Mac OS.

### Alternatives

Aside from the `Element.closest()` method, other potential alternatives for finding ancestor elements in a DOM structure include:
- Using manual DOM traversal methods like `parentElement` or `parentNode`, loop through parents until a matching element is found.
- Implementing custom utility functions that may include caching mechanisms to store previously found ancestors, enhancing performance on repeated lookups.
- Utilizing libraries (like jQuery) that provide additional abstractions for DOM manipulation and traversal but may have overhead compared to native methods.

By analyzing these approaches, engineers can choose the most suitable method based on the specific needs of their application, balancing performance and code maintainability.

Related benchmarks:

closest comparision 2 (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):