Run results for: closest vs for loop

Goal: Get the target element inside the DOM Test case #1 - You don't have the target id - Find a target element through DOM via Element.closest() Test case #2 - You have the target id from your state - Find the target element via Document.querySelector()

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Safari/605.1.15

Browser: Safari 17

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 2 years ago

for loop

13.2M/s

for loop (miss)

13.0M/s

closest

4.8M/s

closest (miss)

3.9M/s

View exact numbers

Test name	Executions per second
✓ for loop	13,153,170 Ops/sec
for loop (miss)	12,998,347 Ops/sec
closest	4,770,108 Ops/sec
closest (miss)	3,911,140 Ops/sec

HTML Preparation code:

<div><div><div>

<div data-parent="parent-id">

  <div><div>

    <div data-target="target-id">

      <div><div>      <div><div>      <div><div>      <div><div>      <div><div>

        <div data-clicked="clicked-id"></div>

      </div></div>      <div><div>      <div><div>      <div><div>      <div><div>

    </div>

  </div></div>

</div>

</div></div></div>

Script Preparation code:

var clicked = document.querySelector('[data-clicked]')

Tests:

closest
clicked.closest('[data-target]')
for loop
let target = clicked; do { target = target.parentElement; } while (target.getAttribute('data-target') === 'target-id' && target !== document.documentElement);
closest (miss)
clicked.closest('[data-miss]')
for loop (miss)
let target = clicked; do { target = target.parentElement; } while (target.getAttribute('data-miss') && target !== document.documentElement);