Benchmark: While loop vs Closest 2 - distance 0

HTML Preparation code:

<div id="app-target">
  <div>
    <div>
      <div>
        <a id="click-target">
        </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 break down the provided benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark is designed to compare two approaches for finding an anchor element (`<a>`) within a DOM tree:

1. **While Loop**: This approach uses a traditional while loop to traverse the DOM tree, starting from the `clickTarget` element.
2. **Closest Method**: This approach uses the built-in `closest()` method on the `clickTarget` element, which attempts to find the closest ancestor element that matches the specified selector (`'a'`).

**Options Compared**

The two options are being compared in terms of their performance (number of executions per second) and efficiency.

**Pros and Cons of Each Approach**

1. **While Loop**:
	* Pros: Control over the traversal process, potentially more accurate results.
	* Cons: Can be slower for large DOM trees due to the overhead of the loop.
2. **Closest Method**:
	* Pros: Faster and more efficient for large DOM trees, as it leverages the browser's optimized algorithm.
	* Cons: Less control over the traversal process, potentially less accurate results.

**Library and Special JS Features**

The benchmark uses two libraries:

1. **`@types/element`**: This library provides type definitions for the `Element` interface, which is used in the `parent_element()` function. It's likely included to ensure correct TypeScript compilation.
2. **`@ts-expect-error`**: This directive tells TypeScript to ignore a specific error (in this case, handling shadow roots) during compilation.

There are no special JavaScript features or syntaxes being used beyond what's standard for the given libraries and frameworks.

**Other Considerations**

When running this benchmark on different browsers or devices, keep in mind that:

* The `closest()` method may use a more efficient algorithm than a simple while loop.
* The performance difference between the two approaches can vary depending on the size of the DOM tree, the complexity of the elements involved, and other factors.

**Alternatives**

Other alternatives to these approaches could include:

1. **Using a library like `query-string`**: This library provides an efficient way to traverse the DOM using query selectors.
2. **Implementing a custom traversal algorithm**: Depending on the specific requirements of your use case, you might be able to optimize or accelerate the while loop approach by implementing a custom traversal algorithm.

However, it's worth noting that these alternatives would require more significant changes to the original code and may not offer substantial performance benefits over the closest method.

Related benchmarks:

While loop vs Closest 2 - distance 0 (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):