Benchmark: While loop vs Closest 2 - distance 1

HTML Preparation code:

<div id="app-target">
  <div>
    <div>
      <div>
        <a>
          <span id="click-target">
          </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 explanation of the provided benchmark.

**Benchmark Description**

The provided JSON represents two individual test cases for measuring performance differences between a traditional `while` loop and the `closest()` method in HTML elements. The benchmark is designed to compare the performance of these two approaches on finding an anchor element (`<a>`) within a nested structure.

**Options Compared**

Two options are compared:

1. **While Loop**: A traditional `while` loop that iterates through the DOM tree until it finds the target anchor element.
2. **Closest Method**: The built-in `closest()` method of HTML elements, which returns the closest ancestor element matching a given selector.

**Pros and Cons**

* **While Loop**:
	+ Pros: Simple to implement and understand.
	+ Cons: Can lead to performance issues due to unnecessary iterations through the DOM tree.
* **Closest Method**:
	+ Pros: Efficient and optimized for finding closest ancestors.
	+ Cons: May not work as expected if the target element is not found, or if the closest ancestor is not an anchor element.

**Library Usage**

The benchmark uses the `closest()` method of HTML elements, which is a built-in method in modern browsers. This method is implemented by the browser and optimized for performance.

**Special JavaScript Features/Syntax**

None are mentioned specifically in the provided code. However, it's worth noting that the `closest()` method was introduced in ECMAScript 2015 (ES6) and has been widely supported in modern browsers since then.

**Other Considerations**

The benchmark assumes a desktop environment with a Linux operating system and Chrome browser version 107. The results should be taken into account only for this specific setup.

**Alternative Approaches**

There are alternative approaches to finding an anchor element, such as:

1. Using `querySelector()` or `querySelectorAll()`: These methods can be used to find a single or multiple elements matching a selector.
2. Using `getElementsByClassName()`: This method can be used to find all elements with a specific class name.
3. Implementing a custom search algorithm: A custom algorithm could be implemented to efficiently search through the DOM tree.

However, these alternatives are not directly comparable to the while loop and closest method approaches in this benchmark.

Related benchmarks:

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