Benchmark: Vanilla JS closest VS while loop

HTML Preparation code:

<html>
  <body>
    <div class="a1">
      <div class="b1">
        <div class="c1">
          <div class="d1">
            <div class="e1">
              <div id="final"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="a1">
      <div class="b1">
        <div class="c1">
          <div class="d1">
            <div class="e1">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="a1">
      <div class="b1">
        <div class="c1">
          <div class="d1">
            <div class="e1">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="a1">
      <div class="b1">
        <div class="c1">
          <div class="d1">
            <div class="e1">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="a1">
      <div class="b1">
        <div class="c1">
          <div class="d1">
            <div class="e1">
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Script Preparation code:

var el = document.getElementById('final')

Tests:

Vanilla JS way
var target = el.closest('.b1')
While loop way
var current = el while (true) { current = current.parentElement if (!current) break; if (current.classList.contains('b1')) break; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Vanilla JS way
While loop way

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/128.0.0.0 Safari/537.36

Browser/OS: Chrome 128 on Windows

View result in a separate tab

Test name	Executions per second
Vanilla JS way	1983271.4 Ops/sec
While loop way	1815738.1 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down what's tested in the provided JSON, explain the options compared, their pros and cons, and other considerations.

**Benchmark Definition**

The benchmark is comparing two approaches to find an ancestor element with a specific class using JavaScript:

1. **Vanilla JS way**: `var target = el.closest('.b1')`
2. **While loop way**: `var current = el; while (true) { current = current.parentElement; if (!current) break; if (current.classList.contains('b1')) break; }`

**Options compared**

The two options are:

* Using the `closest()` method, which is part of the DOM API in modern browsers.
* Implementing a custom while loop to traverse the DOM tree.

**Pros and Cons**

**Vanilla JS way:**

Pros:

* Easier to read and understand, as it uses a well-known method (`closest()`) from the DOM API.
* Typically faster, since it's implemented in native code by the browser engine.

Cons:

* Requires modern browsers that support the `closest()` method (Chrome 128 is an example of this).
* May not be compatible with older browsers or environments where the `closest()` method is not available.

**While loop way:**

Pros:

* More portable, as it doesn't rely on a specific browser method.
* Can be implemented in any environment that supports JavaScript and DOM manipulation (e.g., Node.js, web workers).

Cons:

* Longer and more complex code, which can lead to performance overhead due to the additional computation.
* Less readable and maintainable, especially for large or complex DOM trees.

**Other considerations**

The benchmark also includes the HTML structure used for testing, which consists of multiple nested div elements with a specific class (`b1`). This structure is designed to simulate a typical web page layout.

**Library usage (none)**

There are no libraries mentioned in the provided JSON that would impact the comparison between the two approaches.

**Special JS features (none)**

There are no special JavaScript features or syntax mentioned in the provided JSON. Both approaches use standard JavaScript and DOM APIs.

**Alternatives**

Other alternatives for finding an ancestor element with a specific class include:

* Using `querySelector()` and `getElementsByClassName()`: `var target = el.querySelector('.b1');`
* Implementing a recursive function to traverse the DOM tree: `function findAncestor(el, className) { ... }`

However, these approaches are not as efficient or portable as the two options compared in this benchmark.

Related benchmarks:

Vanilla JS closest VS while loop (version: 0)

Comparing performance of: Vanilla JS way vs While loop way

Created: one year ago by: Guest

Jump to the latest result

Vanilla JS way

While loop way

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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