Benchmark: closest vs for loop

closest vs for loop (version: 0)

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()

Comparing performance of: `closest vs for loop vs closest (miss) vs for loop (miss)`

Created: 2 years ago by: Registered User

Go to the latest result

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);

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

for loop (miss)

19.3M/s

for loop

19.0M/s

closest

6.1M/s

closest (miss)

4.0M/s

Fastest: for loop (miss) (4.9x faster)

View exact numbers

✓ for loop (miss): 19,272,678 ops/sec
• for loop: 18,989,208 ops/sec
• closest: 6,109,944 ops/sec
• closest (miss): 3,952,855 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
closest
for loop
closest (miss)
for loop (miss)

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Browser/OS: Chrome 135 on Windows

View result in a separate tab

for loop (miss)

13.7M/s

for loop

13.4M/s

closest

2.1M/s

closest (miss)

1.4M/s

View exact numbers

Test name	Executions per second
✓ for loop (miss)	13,718,072 Ops/sec
for loop	13,381,967 Ops/sec
closest	2,143,691 Ops/sec
closest (miss)	1,381,410 Ops/sec

closest vs for loop (version: 0)

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()

Comparing performance of: closest vs for loop vs closest (miss) vs for loop (miss)

Created: 2 years ago by: Registered User

Go to the latest result

closest

for loop

closest (miss)

for loop (miss)

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Related benchmarks

Comparing performance of: `closest vs for loop vs closest (miss) vs for loop (miss)`