Benchmark: While loop vs Closest 2

HTML Preparation code:

<div id="app-target">
  <div>
    <div>
      <div>
        <a>
          <span>
            <span id="click-target">
            </span>
          </span>
        </a>
      </div>
    </div>
  </div>
</div>

Script Preparation code:

var appTarget = document.getElementById('app-target');
var clickTarget = document.getElementById('click-target');

/**
 * @param {Element} element
 * @returns {Element | null}
 */
function parent_element(element) {
	let parent = element.assignedSlot ?? element.parentNode;

	// @ts-expect-error handle shadow roots
	if (parent?.nodeType === 11) parent = parent.host;

	return /** @type {Element} */ (parent);
}

/**
 * @param {Element} element
 * @param {Element} target
 */
function find_anchor(element, target) {
	while (element !== target) {
		if (element.nodeName.toUpperCase() === 'A') {
			return /** @type {HTMLAnchorElement | SVGAElement} */ (element);
		}

		element = /** @type {Element} */ (parent_element(element));
	}
}

Tests:

while
const a = find_anchor(clickTarget, appTarget); if (!a) { /* return */ }
closest
const a = clickTarget.closest('a'); if (!a || !appTarget.contains(a)) { /* return */ }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
while
closest

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark.

**Benchmark Definition**

The provided JSON represents a JavaScript microbenchmark that compares two approaches: using a `while` loop and using the `closest()` method.

The script preparation code defines two functions:

1. `parent_element(element)`: This function takes an element as input and returns its parent element, handling cases where the element is in a shadow root.
2. `find_anchor(element, target)`: This function uses the `while` loop to find an anchor element (`<a>`) that matches the specified `target`. The loop continues until it finds a matching anchor or exhausts all possible ancestors.

The HTML preparation code defines a nested structure with multiple `<div>` elements and an `<a>` element inside one of them. The `clickTarget` and `appTarget` variables point to these elements, respectively.

**Options Compared**

Two approaches are compared:

1. **While loop**: The `find_anchor` function uses a `while` loop to search for the anchor element.
2. **Closest() method**: The second test case uses the `closest()` method on the `clickTarget` element to find an anchor element.

**Pros and Cons**

**While Loop:**

Pros:

* Easy to implement and understand
* Can be optimized for performance (e.g., by using early returns or caching)

Cons:

* Can be slower due to the overhead of the loop and potential branching

**Closest() Method:**

Pros:

* Faster because it's a built-in method that leverages browser-specific optimizations
* Less code to maintain

Cons:

* May not work as expected in older browsers or with specific element layouts
* Requires a valid `closest()` method implementation, which might be missing on some elements

**Other Considerations**

* The benchmark assumes that the `while` loop will always find an anchor element. However, if no matching anchor is found, the loop may never terminate, potentially leading to performance issues.
* The use of `parent_element(element)` within the `find_anchor` function might introduce additional overhead due to the `ts-expect-error` comment, which suggests that the author expects some error handling or fallback behavior.

**Libraries and Features**

There is no explicit library mentioned in the benchmark. However, the `closest()` method is a standard feature of modern web browsers, implemented using various techniques such as the W3C CSS `:is()` pseudo-class or browser-specific optimizations.

**Special JS Features or Syntax**

The benchmark uses:

* JavaScript classes (not explicitly, but implied through the use of arrow functions and function declarations)
* JSDoc-style comments for documentation and type annotations
* Optional chaining (`?.`) for null-safing

If you'd like to explore alternative approaches or libraries, here are a few options:

* **Benchmarking frameworks**: Libraries like Benchmark.js, Microbenchmark.js, or BenchmarkUI provide more comprehensive benchmarking capabilities, including support for multiple algorithms, optimization techniques, and visualization tools.
* **CSS performance optimization**: Tools like Chrome DevTools' CSS Performance Inspector or Lighthouse's CSS Layout Optimization can help identify opportunities to improve the performance of CSS-based layouts.
* **Shadow DOM and CSSOM**: The use of `shadow roots` and `closest()` method benefits from a good understanding of these web APIs, which can be explored in more depth through official documentation, tutorials, or online courses.

Related benchmarks:

While loop vs Closest 2 (version: 0)

Comparing performance of: while vs closest

Created: 3 years ago by: Guest

Jump to the latest result

while

closest

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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