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

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

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	2547972.0 Ops/sec
while distance 0	446217300.0 Ops/sec
while no a distance 3	1203547.0 Ops/sec
closest distance 3	4829731.0 Ops/sec
closest distance 0	711585300.0 Ops/sec
closest no a distance 3	3497296.0 Ops/sec

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