Benchmark: querySelector vs Closest!

HTML Preparation code:

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

Tests:

Closest?
document.querySelector('[data-clicked]').closest('[data-target]')
querySelector?
document.querySelector('[data-parent="parent-id"]:has([data-target="target-id"])')

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Closest?
querySelector?

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 month ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 122 on Android

View result in a separate tab

Test name	Executions per second
Closest?	709017.6 Ops/sec
querySelector?	117118.4 Ops/sec

querySelector vs Closest! (version: 0)

Comparing performance of: Closest? vs querySelector?

Created: one month ago by: Guest

Jump to the latest result

Closest?

querySelector?

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A