Run results for: getElementById + getElementByClassName vs querySelector

Run details:

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

Browser: Chrome 84

Operating system: Windows

Device Platform: Desktop

Date tested: 4 years ago

Test name	Executions per second
getElementsById + getElementsByClassName	2971299.8 Ops/sec
querySelector + querySelector	1929810.5 Ops/sec
querySelector	2452812.5 Ops/sec
cache + getElementsByClassName	3284783.2 Ops/sec
cache + querySelector	2905447.8 Ops/sec

HTML Preparation code:

<div id="testElement">
  <div class="testElementChild1">1</div>
  <div class="testElementChild2">2</div>
  <div class="testElementChild3">3</div>
  <div class="testElementChild4">4</div>
  <div class="testElementChild5">5</div>
</div>

Script Preparation code:

var doc = document;
var testElement = doc.getElementById('testElement');

Tests:

getElementsById + getElementsByClassName
var test = doc.getElementById('testElement').getElementsByClassName('testElementChild3').innerHTML;
querySelector + querySelector
var test = doc.querySelector('#testElement').querySelector('.testElementChild3').innerHTML;
querySelector
var test = doc.querySelector('#testElement .testElementChild3').innerHTML;
cache + getElementsByClassName
var test = testElement.getElementsByClassName('testElementChild3').innerHTML;
cache + querySelector
var test = testElement.querySelector('.testElementChild3').innerHTML;

Run results for: getElementById + getElementByClassName vs querySelector

getElementById + getElementByClass vs querySelector

getElementsById + getElementsByClassName

querySelector + querySelector

querySelector

cache + getElementsByClassName

cache + querySelector