Benchmark: document.getElementById+querySelectorAll vs querySelectorAll

HTML Preparation code:


<div id='test'>
  <button data-id="button" >test</button>
  <button data-id="button" >test</button>
  <button data-id="button" >test</button>
  <button data-id="button" >test</button>
  <button data-id="button" >test</button>
</div>
<div id='test1'>
  <button data-id="button" >test</button>
  <button data-id="button" >test</button>
  <button data-id="button" >test</button>
  <button data-id="button" >test</button>
  <button data-id="button" >test</button>
</div>

<div id='test2'>
  <button data-id="button" >test</button>
  <button data-id="button" >test</button>
  <button data-id="button" >test</button>
  <button data-id="button" >test</button>
  <button data-id="button" >test</button>
</div>

Tests:

getElementByID+querySelectorAll
document.getElementById('test').querySelectorAll('[data-id]');
querySelectorAll
document.querySelectorAll('#test > [data-id]');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getElementByID+querySelectorAll
querySelectorAll

document.getElementById+querySelectorAll vs querySelectorAll (version: 1)

Comparing performance of: getElementByID+querySelectorAll vs querySelectorAll

Created: one month ago by: Registered User

Jump to the latest result

getElementByID+querySelectorAll

querySelectorAll

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results