Run results for: closest vs querySelector performance for large dom

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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36 Edg/132.0.0.0

Browser: Chrome 132

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

querySelector

9.2M/s

closest

6.9M/s

View exact numbers

Test name	Executions per second
✓ querySelector	9,180,616 Ops/sec
closest	6,895,601 Ops/sec

HTML Preparation code:

<div><div><div>

<div data-parent="parent-id">
<div>
  <div>
    <div>
      <div>
        <div>
  <div>

    <div data-target="target-id">

      <div><div>

        <div data-clicked="clicked-id"></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]')
var parentEl = document.querySelector('[data-parent="parent-id"]')

Tests:

closest
clicked.closest('[data-target]')
querySelector
parentEl.querySelector('[data-target="target-id"]')