Run results for: querySelector Class vs querySelector Attribute

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.150 Safari/537.36 Edg/88.0.705.63

Browser: Chrome 88

Operating system: Windows

Device Platform: Desktop

Date tested: 3 years ago

Test name	Executions per second
querySelector by Class	3004747.5 Ops/sec
querySelector by Attribute	1007703.3 Ops/sec
querySelector by Class Attribute	912264.1 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