Benchmark: querySelector-2 - MeasureThat.net

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelector with misses
getElementById with misses
querySelector without misses
getElementById without misses

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 5 years ago)

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

Browser/OS: Chrome 71 on Linux

View result in a separate tab

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

querySelector-2 (version: 0)

Comparing performance of: querySelector with misses vs getElementById with misses vs querySelector without misses vs getElementById without misses

Created: 5 years ago by: Registered User

Jump to the latest result

querySelector with misses

getElementById with misses

querySelector without misses

getElementById without misses

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A