Run results for: parent vs document queryselectorAll

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:53.0) Gecko/20100101 Firefox/53.0

Browser: Firefox 53

Operating system: Windows

Device Platform: Other

Date tested: 7 years ago

Test name	Executions per second
parent.querySelector	444005.7 Ops/sec
document.querySelector	295505.6 Ops/sec
document.querySelector 2	414535.2 Ops/sec

HTML Preparation code:

<div id="main">
<div><div><div><div><div><div>
  
<div id="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

</div></div></div></div></div></div>
</div>

Script Preparation code:

var main = document.querySelector('#main');
var parent = document.querySelector('#parent');

Tests:

parent.querySelector
var child = parent.querySelectorAll('.child');
document.querySelector
var child = main.querySelectorAll('#parent .child');
document.querySelector 2
var child = main.querySelectorAll('.child');

Run results for: parent vs document queryselectorAll

parent.querySelector

document.querySelector

document.querySelector 2