Run results for: className vs data attr querySelectorAll vs getElementsByClassName

Test name	Executions per second
✓ getElementsByClassName	8,097,328 Ops/sec
querySelectorAll class name	5,712,417 Ops/sec
querySelectorAll data attr	1,895,605 Ops/sec
querySelectorAll class name plus node name	1,532,051 Ops/sec
querySelectorAll data attr plus node name	1,394,072 Ops/sec
querySelectorAll node name plus class name plus data attr	1,371,442 Ops/sec

HTML Preparation code:

<div class="component-1" data-js="component-1"></div>
<div class="component-1" data-js="component-1"></div>
<div class="component-1" data-js="component-1"></div>
<div class="component-1" data-js="component-1"></div>
<div class="component-1" data-js="component-1"></div>
<div class="component-1" data-js="component-1"></div>
<div class="component-1" data-js="component-1"></div>
<div class="component-1" data-js="component-1"></div>
<div class="component-1" data-js="component-1"></div>
<div class="component-1" data-js="component-1"></div>
<div class="component-1" data-js="component-1"></div>
<div class="component-1" data-js="component-1"></div>
<div class="component-1" data-js="component-1"></div>
<div class="component-1" data-js="component-1"></div>
<div class="component-1" data-js="component-1"></div>
<div class="component-1" data-js="component-1"></div>
<div class="component-1" data-js="component-1"></div>
<div class="component-1" data-js="component-1"></div>
<div class="component-1" data-js="component-1"></div>
<div class="component-1" data-js="component-1"></div>
<div class="component-1" data-js="component-1"></div>
<div class="component-1" data-js="component-1"></div>
<div class="component-1" data-js="component-1"></div>
<div class="component-1" data-js="component-1"></div>

<div class="component-2" data-js="component-2"></div>
<div class="component-2" data-js="component-2"></div>
<div class="component-2" data-js="component-2"></div>
<div class="component-2" data-js="component-2"></div>
<div class="component-2" data-js="component-2"></div>
<div class="component-2" data-js="component-2"></div>
<div class="component-2" data-js="component-2"></div>
<div class="component-2" data-js="component-2"></div>
<div class="component-2" data-js="component-2"></div>
<div class="component-2" data-js="component-2"></div>
<div class="component-2" data-js="component-2"></div>
<div class="component-2" data-js="component-2"></div>
<div class="component-2" data-js="component-2"></div>
<div class="component-2" data-js="component-2"></div>
<div class="component-2" data-js="component-2"></div>
<div class="component-2" data-js="component-2"></div>
<div class="component-2" data-js="component-2"></div>
<div class="component-2" data-js="component-2"></div>
<div class="component-2" data-js="component-2"></div>
<div class="component-2" data-js="component-2"></div>
<div class="component-2" data-js="component-2"></div>
<div class="component-2" data-js="component-2"></div>
<div class="component-2" data-js="component-2"></div>
<div class="component-2" data-js="component-2"></div>

Tests:

querySelectorAll data attr
var result = document.querySelectorAll("[data-js='component-1']");
querySelectorAll data attr plus node name
var result = document.querySelectorAll("div[data-js='component-1']");
querySelectorAll class name
var result = document.querySelectorAll('.component-1')
querySelectorAll class name plus node name
var result = document.querySelectorAll('div.component-1');
querySelectorAll node name plus class name plus data attr
var result = document.querySelectorAll("div.component-1[data-js='component-1']");
getElementsByClassName
document.getElementsByClassName('component-1')

Run results for: className vs data attr querySelectorAll vs getElementsByClassName

This benchmark compares the performance of different methods for selecting elements in JavaScript: querySelectorAll and getElementsByClassName.

querySelectorAll data attr

querySelectorAll data attr plus node name

querySelectorAll class name

querySelectorAll class name plus node name

querySelectorAll node name plus class name plus data attr

getElementsByClassName