Run results for: While loop vs Closest 2

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36

Browser: Chrome 107

Operating system: Linux

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
while	1264947.0 Ops/sec
closest	2656481.0 Ops/sec

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 */ }

Run results for: While loop vs Closest 2

while

closest