Benchmark: Javascript closest method benchmarks

HTML Preparation code:

  <div class="1" id="one">
            <div class="2">
                <div class="3">
                    <div class="4">
                        <div class="5">
                            <div class="5">
                                <div class="6">
                                    <div class="7">
                                        <div class="8">
                                            <div class="9">
                                                <div class="10">
                                                    <div class="11">
                                                        <div class="12">
                                                            <div class="13">
                                                                <div class="14">
                                                                    <div class="15">
                                                                        <div class="16" id="helloWorld">
                                                                            <div class="17">
                                                
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Script Preparation code:

var class17 = document.getElementsByClassName("17");

Tests:

closest method
class17[0].closest("#one");
closest method 2
class17[0].closest("#nope");

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
closest method
closest method 2

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 18_4_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.4 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 18 on iOS 18.4.1

View result in a separate tab

Test name	Executions per second
closest method	2668860.2 Ops/sec
closest method 2	2379439.8 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

I'll break down the benchmark and its options for you.

**Benchmark Overview**

The test measures the performance of JavaScript's `closest` method, which returns the closest ancestor element that matches a given selector. The benchmark uses a complex HTML structure to simulate a real-world scenario, where elements are nested with various classes.

**Script Preparation Code**

The script preparation code creates an array `class17` containing a single element with class "17". This is used as a reference point for the closest method tests.
```javascript
var class17 = document.getElementsByClassName("17");
```
**Html Preparation Code**

The HTML preparation code generates a nested HTML structure with multiple levels of containers, each with unique classes. The goal is to make it difficult for the browser to find the closest match.
```html
<div class="1" id="one">
    <div class="2">
        <div class="3">
            <div class="4">
                <div class="5">
                    
                </div>
            </div>
        </div>
    </div>
</div>
```
**Test Cases**

There are two test cases:

1. `closest method`: The closest element with class "17" is within the first-level container (`#one`).
2. `closest method 2`: The closest element with class "17" is not within the first-level container (`#nope`, which doesn't exist in the HTML structure).

**Options Compared**

The benchmark compares two options for implementing the `closest` method:

1. **Method 1**: Use a recursive approach to traverse the DOM tree.
2. **Method 2**: Use a non-recursive approach with an iterator.

**Pros and Cons of Each Approach**

### Method 1: Recursive Approach

Pros:

* Easy to understand and implement
* Can handle complex HTML structures

Cons:

* May perform more operations than necessary due to unnecessary recursion
* May be slower for large HTML structures

### Method 2: Non-Recursive Approach with Iterator

Pros:

* More efficient by avoiding unnecessary recursive calls
* Can provide better performance for large HTML structures

Cons:

* May be harder to understand and implement, especially for complex structures
* Requires more expertise in handling iterators and DOM traversal

**Library Used**

There is no explicit library mentioned in the benchmark definition. However, the `document.getElementsByClassName` method is used, which is a part of the DOM API.

**Special JS Feature/Syntax**

The benchmark uses the `getElementsByClassName` method, which is a proprietary feature introduced by Mozilla in 2009. While it's still widely supported, it may not be available in older browsers or certain environments.

**Alternatives**

For measuring JavaScript performance, you can use other tools and frameworks like:

1. Google Closure Compiler
2. WebAssembly (WASM) benchmarks
3. Benchmark.js
4. V8 benchmarking tools

Keep in mind that the choice of tool often depends on your specific needs, expertise, and target audience.

Related benchmarks:

Javascript closest method benchmarks (version: 0)

Comparing performance of: closest method vs closest method 2

Created: 2 years ago by: Registered User

Jump to the latest result

closest method

closest method 2

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):