Run results for: querySelector

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.92 Safari/537.36

Browser: Chrome 76

Operating system: Windows

Device Platform: Desktop

Date tested: 4 years ago

Test name	Executions per second
querySelector	639787.4 Ops/sec
getElementById	1189567.0 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
let n = (Math.random() * 45) | 0; x = document.querySelector("#blahblah-" + n);
getElementById
let n = (Math.random() * 45) | 0; x = document.getElementById("blahblah-" + n);

Run results for: querySelector

querySelector

getElementById