Run results for: querySelector on HTML tag vs. closest

Run details:

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

Browser: Chrome 131

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

Benchmark engine: Benchmark.js

getting the html tag with querySelector

44.3M/s

getting the html tag with closest

10.9M/s

View exact numbers

Test name	Executions per second
✓ getting the html tag with querySelector	44,273,196 Ops/sec
getting the html tag with closest	10,924,916 Ops/sec

HTML Preparation code:

<html>
  <body>
    <div>
      <div>
        <div>
          <div>
            <div id="test"></div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Script Preparation code:

window.theDiv = document.querySelector('#test');

Tests:

getting the html tag with querySelector
const theHtml = document.querySelector('html');
getting the html tag with closest
const theHtml = theDiv.closest('html')

Run results for: querySelector on HTML tag vs. closest

Figuring out what's faster, to querySelect the HTML tag or use the javascript closest

getting the html tag with querySelector

getting the html tag with closest