Benchmark: find anchor - MeasureThat.net

HTML Preparation code:

<div id="app-target">
  <div>
    <div>
      <div>
        <a id="distance-0">
          <span>
            <span>
              <span id="distance-3">
              </span>
            </span>
          </span>
        </a>
        <div id="no-a-distance-0">
          <span>
            <span>
              <span id="no-a-distance-3">
              </span>
            </span>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

Script Preparation code:

var appTarget = document.getElementById('app-target');

var distance0 = document.getElementById('distance-0');
var distance3 = document.getElementById('distance-3');

var noA0 = document.getElementById('no-a-distance-0');
var noA3 = document.getElementById('no-a-distance-3');

/**
 * @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));
	}
}

function find_anchor_closest(element, target) {
	// fast path
	if (element.nodeName.toUpperCase() === 'A') {
		return element;
	}

	const a = element.closest('a');
	if (target.contains(a)) {
		return a;
	}
}

Tests:

while distance 3
const a = find_anchor(distance3, appTarget); if (!a) { /* return */ }
while distance 0
const a = find_anchor(distance0, appTarget); if (!a) { /* return */ }
while no a distance 3
const a = find_anchor(noA3, appTarget); if (!a) { /* return */ }
closest distance 3
const a = find_anchor_closest(distance3, appTarget); if (!a) { /* return */ }
closest distance 0
const a = find_anchor_closest(distance0, appTarget); if (!a) { /* return */ }
closest no a distance 3
const a = find_anchor_closest(noA3, appTarget); if (!a) { /* return */ }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
while distance 3
while distance 0
while no a distance 3
closest distance 3
closest distance 0
closest no a distance 3

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

I'll break down the provided JSON and explain what's being tested, compared, and their pros/cons.

**Benchmark Definition**

The benchmark is defined in two parts: Script Preparation Code and Html Preparation Code. The Script Preparation Code sets up variables referencing HTML elements using `document.getElementById`. These elements are then used to call two functions: `find_anchor` and `find_anchor_closest`.

1. **Script Preparation Code**
   - This code prepares the JavaScript environment by setting up references to specific HTML elements.
   - It uses `document.getElementById` to get references to `appTarget`, `distance0`, `distance3`, `noA0`, and `noA3`.
   - The `find_anchor_closest` function is not defined in this script, which implies that the browser will use its own implementation.

2. **Html Preparation Code**
   - This code defines the HTML structure to be used by the benchmark.
   - It creates a nested div structure with `a` elements within it, each containing a span element with an ID (e.g., "distance-3").

**Individual Test Cases**

Each test case runs one of the two functions (`find_anchor` or `find_anchor_closest`) on different pairs of elements. The difference between them is:

1. **while distance 0**: Calls `find_anchor(distance0, appTarget)`.
   - This checks how fast it can find an anchor in the 'distance-0' element within the app-target container.

2. **while distance 3**: Calls `find_anchor(distance3, appTarget)`.
   - Similar to the previous case but on the 'distance-3' element.

3. **closest distance 0**: Calls `find_anchor_closest(distance0, appTarget)`.
   - This checks how fast it can find an anchor closest to the 'distance-0' element within the app-target container using a more efficient approach by finding if there's an 'a' in its parent that contains it.

4. **closest distance 3**: Calls `find_anchor_closest(distance3, appTarget)`.
   - Similar to the previous case but on the 'distance-3' element.

5. **while no a distance 3**: Calls `find_anchor(noA0, appTarget)`. Note that there's a typo here; it should be using 'noA3', not 'noA0'. However, based on the naming convention and the context, it seems like it was meant to test if the browser can find an anchor in elements without 'a' tags.

6. **while no a distance 3 (Alternative)**: Calls `find_anchor_closest(noA3, appTarget)`.
   - This is similar to the previous case but on the 'noA3' element and checks how fast it can find an anchor closest to that element within the app-target container.

**Comparison and Pros/Cons**

- **Speed**: The benchmark compares how quickly different browsers can execute these functions.
- **Browser Variance**: The execution rates of `find_anchor_closest` are generally higher than those for `find_anchor`, indicating that modern browsers have more efficient algorithms in place for finding anchors.
- **Typo and Error Handling**: There's a typo in the 'while no a distance 3' case, indicating potential issues with robustness or error handling capabilities of different browsers.

**Conclusion**

This benchmark is designed to measure the performance difference between `find_anchor` and `find_anchor_closest`, two methods for finding anchors within HTML elements. The results indicate that more modern browsers perform better on the more efficient `find_anchor_closest` method, suggesting improved optimization in their algorithms.

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:106.0) Gecko/20100101 Firefox/106.0

Browser/OS: Firefox 106 on Linux

View result in a separate tab

Test name	Executions per second
while distance 3	2547971.8 Ops/sec
while distance 0	446217280.0 Ops/sec
while no a distance 3	1203546.8 Ops/sec
closest distance 3	4829730.5 Ops/sec
closest distance 0	711585280.0 Ops/sec
closest no a distance 3	3497296.0 Ops/sec

Related benchmarks:

find anchor (version: 0)

Comparing performance of: while distance 3 vs while distance 0 vs while no a distance 3 vs closest distance 3 vs closest distance 0 vs closest no a distance 3

Created: one year ago by: Guest

Jump to the latest result

while distance 3

while distance 0

while no a distance 3

closest distance 3

closest distance 0

closest no a distance 3

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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