Benchmark: Closest or loop - MeasureThat.net

HTML Preparation code:

<div class="root">
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                  <div class="foo">
                    <div>
                      <div class="bar"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Tests:

closest
var element = document.querySelector(".bar"); var i = 1000; while (i--) { const res = element.closest(".foo"); if (res) { // do something } }
while
var element = document.querySelector(".bar"); var i = 1000; while (i--) { let el = element; while(el != null && !el.classList.contains("foo")) { el = el.parentElement; } if (el) { // do something } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
closest
while

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 27 days ago):

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested, compared, and their pros/cons.

**Benchmark Overview**

MeasureThat.net provides a JavaScript microbenchmarking tool where users can create and run benchmarks to compare different approaches. The given benchmark tests two alternatives for finding an element within its ancestor hierarchy in HTML documents.

**Script Preparation Code**

The script preparation code is empty, which means that the benchmark doesn't require any initialization or setup before running the test cases.

**Individual Test Cases**

There are two test cases:

1. **Closest**
```javascript
var element = document.querySelector(".bar");
var i = 1000;
while (i--) {
  const res = element.closest(".foo");
  // ...
}
```
This approach uses `closest()` to find the closest ancestor of the `.bar` element that contains an element with class `foo`. The `while` loop runs 1000 times, and in each iteration, it checks if the result is not null. If it's not null, some code is executed.

2. **While**
```javascript
var element = document.querySelector(".bar");
var i = 1000;
let el = element;
while (el != null && !el.classList.contains("foo")) {
  el = el.parentElement;
}
// ...
```
This approach uses a `while` loop to traverse the ancestor hierarchy of the `.bar` element until it finds an element with class `foo`. The loop runs 1000 times, and in each iteration, it updates the `el` variable.

**Comparison**

The benchmark compares the performance of these two approaches:

* **Closest**: Uses `closest()` to find the closest ancestor.
* **While**: Manually traverses the ancestor hierarchy using a `while` loop.

**Pros/Cons**

* **Closest**:
	+ Pros:
		- Faster and more efficient, as it directly uses the browser's built-in `closest()` method.
	+ Cons:
		- May not work in older browsers that don't support this method.
* **While**:
	+ Pros:
		- More portable across different browsers.
	+ Cons:
		- Slower and less efficient, as it manually traverses the ancestor hierarchy.

**Library**

The `closest()` method is a part of the DOM API in modern browsers. Its purpose is to find the closest element within its ancestor hierarchy that matches a specified selector or CSS class.

**Special JS Feature/Syntax**

None mentioned explicitly, but note that this benchmark uses JavaScript's built-in `querySelector` and `closest` methods, as well as the `while` loop construct.

**Other Alternatives**

For similar benchmarks, you might also see approaches like:

* Using `getElementsByClassName()` instead of `querySelector`.
* Using ` Element.contains()` instead of `classList.contains()`.
* Using CSS selectors with `:has()` pseudo-class.
* Using library functions like jQuery's `.closest()` method.

These alternatives would change the performance characteristics and may have different pros/cons compared to the original approaches.

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:96.0) Gecko/20100101 Firefox/96.0

Browser/OS: Firefox 96 on Windows

View result in a separate tab

Test name	Executions per second
closest	7206.9 Ops/sec
while	4390.5 Ops/sec

Related benchmarks:

Closest or loop (version: 0)

Comparing performance of: closest vs while

Created: 2 years ago by: Guest

Jump to the latest result

closest

while

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 27 days ago):