Run results for: document.getElementById+querySelectorAll

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:150.0) Gecko/20100101 Firefox/150.0

Browser: Firefox 150

Operating system: Linux

Device Platform: Desktop

Date tested: 3 months ago

getElementByID+querySelectorAll

3.6M/s

querySelectorAll

1.1M/s

View exact numbers

Test name	Executions per second
✓ getElementByID+querySelectorAll	3,595,496 Ops/sec
querySelectorAll	1,092,292 Ops/sec

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]');