Run results for: querySelector-2

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36

Browser: Chrome 71

Operating system: Linux

Device Platform: Desktop

Date tested: 5 years ago

Test name	Executions per second
querySelector with misses	264843.2 Ops/sec
getElementById with misses	525069.0 Ops/sec
querySelector without misses	267294.7 Ops/sec
getElementById without misses	509181.2 Ops/sec

HTML Preparation code:

<div class="c1 c2 c3" id="fist-id">
	<div class="c1 c2 c3" id="second-id">
		<div class="c4 c2 c3" id="third-id">
			<div class="c4 c2 c3" id="fourth-id">
				<div class="c4 c5 c3" id="sixth-id">
                    <div class="c4 c5 c6" id="seventh-id">
                      	<div id="blahblah-0"></div>
                      	<div id="blahblah-1"></div>
                      	<div id="blahblah-2"></div>
                      	<div id="blahblah-3"></div>
                      	<div id="blahblah-4"></div>
                      	<div id="blahblah-5"></div>
                      	<div id="blahblah-6"></div>
                      	<div id="blahblah-7"></div>
                      	<div id="blahblah-8"></div>
                      	<div id="blahblah-9"></div>
                      	<div id="blahblah-10"></div>
                      	<div id="blahblah-11"></div>
                      	<div id="blahblah-12"></div>
                      	<div id="blahblah-13"></div>
                      	<div id="blahblah-14"></div>
                      	<div id="blahblah-15"></div>
                      	<div id="blahblah-16"></div>
                      	<div id="blahblah-17"></div>
                      	<div id="blahblah-18"></div>
                      	<div id="blahblah-19"></div>
                      	<div id="blahblah-20"></div>
                      	<div id="blahblah-21"></div>
                      	<div id="blahblah-22"></div>
                      	<div id="blahblah-23"></div>
                      	<div id="blahblah-24"></div>
                      	<div id="blahblah-25"></div>
                      	<div id="blahblah-26"></div>
                      	<div id="blahblah-27"></div>
                      	<div id="blahblah-28"></div>
                      	<div id="blahblah-29"></div>
                      	<div id="blahblah-30"></div>
                      	<div id="blahblah-31"></div>
                      	<div id="blahblah-32"></div>
                      	<div id="blahblah-33"></div>
                      	<div id="blahblah-34"></div>
                      	<div id="blahblah-35"></div>
                      	<div id="blahblah-36"></div>
                      	<div id="blahblah-37"></div>
                      	<div id="blahblah-38"></div>
                      	<div id="blahblah-39"></div>
                    </div>
  				</div>
          	</div>
  		</div>
  	</div>
</div>

Script Preparation code:

x = 0;

Tests:

querySelector with misses
let n = (Math.random() * 45) | 0; x = document.querySelector("#blahblah-" + n);
getElementById with misses
let n = (Math.random() * 45) | 0; x = document.getElementById("blahblah-" + n);
querySelector without misses
let n = (Math.random() * 40) | 0; x = document.querySelector("#blahblah-" + n);
getElementById without misses
let n = (Math.random() * 40) | 0; x = document.getElementById("blahblah-" + n);

Run results for: querySelector-2

querySelector with misses

getElementById with misses

querySelector without misses

getElementById without misses