Run results for: getElementById + getElementByClassName vs querySelector

Run details:

User agent: Mozilla/5.0 (Linux; Android 10; ONEPLUS A5000) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.125 Mobile Safari/537.36

Browser: Chrome Mobile 84

Operating system: Android

Device Platform: Mobile

Date tested: 4 years ago

Test name	Executions per second
getElementsById + getElementsByClassName	1136900.8 Ops/sec
querySelector + querySelector	646935.6 Ops/sec
querySelector	710956.8 Ops/sec
cache + getElementsByClassName	1308206.0 Ops/sec
cache + querySelector	966942.1 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