Run results for: querySelectorAll vs getElementsByName vs getElementsByClassName

Run details:

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

Browser: Chrome 90

Operating system: Windows

Device Platform: Desktop

Date tested: 3 years ago

Test name	Executions per second
querySelectorAll/class	1511561.5 Ops/sec
querySelectorAll/name	842024.6 Ops/sec
getElementsByName	6927183.5 Ops/sec
getElementsByClassName	6628585.5 Ops/sec

HTML Preparation code:

<div class="he" name="hed">
  <div class="ho" name="as">
      <div class="unique" name="unique" >test</div>
  		<div class="unique" name="unique" >test</div>
  </div>
  <div class="unique" name="unique" >test</div>
  <div class="unique" name="unique" >test</div>
</div>

Script Preparation code:

var doc = document;

Tests:

querySelectorAll/class
var test = doc.querySelectorAll('.unique');
querySelectorAll/name
var test = doc.querySelectorAll('[name="unique"]');
getElementsByName
var test = doc.getElementsByName('unique');
getElementsByClassName
var test = doc.getElementsByClassName('unique');

Run results for: querySelectorAll vs getElementsByName vs getElementsByClassName

querySelectorAll vs getElementsByName vs getElementsByClassName

querySelectorAll/class

querySelectorAll/name

getElementsByName

getElementsByClassName