Run results for: querySelector vs Closest!

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Browser: Chrome 122

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
Closest?	1592010.2 Ops/sec
querySelector?	425662.5 Ops/sec

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"])')

Run results for: querySelector vs Closest!

Closest?

querySelector?