Run results for: querySelector Class vs querySelector Attribute

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:86.0) Gecko/20100101 Firefox/86.0

Browser: Firefox 86

Operating system: Windows

Device Platform: Desktop

Date tested: 3 years ago

Test name	Executions per second
querySelector by Class	775420.1 Ops/sec
querySelector by Attribute	375627.8 Ops/sec
querySelector by Class Attribute	334239.0 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"]');

Run results for: querySelector Class vs querySelector Attribute

querySelector by Class

querySelector by Attribute

querySelector by Class Attribute