Benchmark: Getting a list of elements with querySelectorAll vs getElementsByClassName data attr vs class name

Getting a list of elements with querySelectorAll vs getElementsByClassName data attr vs class name (version: 0)

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

Comparing performance of: document.querySelectorAll("[data-js='component-1']") vs document.querySelectorAll("div[data-js='component-1']") vs document.querySelectorAll('.component-1') vs document.querySelectorAll('div.component-1') vs document.querySelectorAll("div.component-1[data-js='component-1']") vs document.getElementsByClassName('component-1')

Created: 4 months ago by: Guest

Jump to the latest result

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:

document.querySelectorAll("[data-js='component-1']")
document.querySelectorAll("[data-js='component-1']")
document.querySelectorAll("div[data-js='component-1']")
document.querySelectorAll("div[data-js='component-1']")
document.querySelectorAll('.component-1')
document.querySelectorAll('.component-1')
document.querySelectorAll('div.component-1')
document.querySelectorAll('div.component-1')
document.querySelectorAll("div.component-1[data-js='component-1']")
document.querySelectorAll("div.component-1[data-js='component-1']")
document.getElementsByClassName('component-1')
document.getElementsByClassName('component-1')

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
document.querySelectorAll("[data-js='component-1']")
document.querySelectorAll("div[data-js='component-1']")
document.querySelectorAll('.component-1')
document.querySelectorAll('div.component-1')
document.querySelectorAll("div.component-1[data-js='component-1']")
document.getElementsByClassName('component-1')

Getting a list of elements with querySelectorAll vs getElementsByClassName data attr vs class name (version: 0)

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

Created: 4 months ago by: Guest

Jump to the latest result

document.querySelectorAll("[data-js='component-1']")

document.querySelectorAll("div[data-js='component-1']")

document.querySelectorAll('.component-1')

document.querySelectorAll('div.component-1')

document.querySelectorAll("div.component-1[data-js='component-1']")

document.getElementsByClassName('component-1')

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

No previous run results