Run results for: className vs data attr querySelectorAll vs getElementsByClassName

Test name	Executions per second
✓ getElementsByClassName	9,575,096 Ops/sec
querySelectorAll class name	1,812,159 Ops/sec
querySelectorAll data attr	1,585,226 Ops/sec
querySelectorAll class name plus node name	1,176,072 Ops/sec
querySelectorAll node name plus class name plus data attr	898,584 Ops/sec
querySelectorAll data attr plus node name	781,202 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