Run results for: querySelector Class vs querySelector Attribute

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:150.0) Gecko/20100101 Firefox/150.0

Browser: Firefox 150

Operating system: Linux

Device Platform: Desktop

Date tested: 3 months ago

querySelector by Attribute

6.3M/s

querySelector by Class

5.4M/s

querySelector by Class Attribute

4.9M/s

View exact numbers

Test name	Executions per second
✓ querySelector by Attribute	6,264,547 Ops/sec
querySelector by Class	5,425,381 Ops/sec
querySelector by Class Attribute	4,932,178 Ops/sec

HTML Preparation code:

<div>
  <span class="a"></span>
  <span class="b"></span>
  <span class="c"></span>
  <span class="d">
    <span class="e"></span>
    <span class="f"></span>
    <span class="g"></span>
  </span>
  <span class="a"></span>
  <span class="b"></span>
  <span class="c"></span>
  <span class="d">
    <span class="e"></span>
    <span class="f">
      <div class="test" someattr="test"></div>
    </span>
    <span class="g"></span>
  </span>
</div>

Tests:

querySelector by Class
document.querySelector(".test");
querySelector by Attribute
document.querySelector('[someattr="test"]');
querySelector by Class Attribute
document.querySelector('[class="test"]');