Run results for: getElementById + getElementByClassName vs querySelector

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:68.9) Gecko/20100101 Goanna/4.6 Firefox/68.9 PaleMoon/28.12.0

Browser: Pale Moon (Firefox Variant) 28

Operating system: Windows

Device Platform: Desktop

Date tested: 4 years ago

Test name	Executions per second
getElementsById + getElementsByClassName	3658711.8 Ops/sec
querySelector + querySelector	2083007.1 Ops/sec
querySelector	2309904.8 Ops/sec
cache + getElementsByClassName	4617164.5 Ops/sec
cache + querySelector	3183228.5 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