Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
querySelector-2
(version: 0)
Comparing performance of:
querySelector with misses vs getElementById with misses vs querySelector without misses vs getElementById without misses
Created:
7 years ago
by:
Registered User
Jump to the latest result
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>
Run tests (4)
Previous results
Fork
Test case name
Result
querySelector with misses
getElementById with misses
querySelector without misses
getElementById without misses
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
I'd be happy to explain the benchmark and its results. **What is being tested?** MeasureThat.net is testing two methods for selecting elements in an HTML document: `document.querySelector` and `document.getElementById`. The tests are designed to measure the performance of these methods under various scenarios, specifically when there are random misses (i.e., the selector does not match any element). **Options compared** There are four test cases: 1. `querySelector with misses`: This test uses a random selector that may or may not match an existing element in the document. 2. `getElementById with misses`: Similar to the previous test, but this time using `document.getElementById` instead of `document.querySelector`. 3. `querySelector without misses`: In this case, the selector is guaranteed to match an existing element in the document. 4. `getElementById without misses`: Again, a guarantee that the selector will match an existing element. **Pros and cons of each approach** 1. **querySelector with misses**: * Pros: This method can be faster than `document.getElementById` when there are many elements with matching selectors, since it only needs to traverse a subset of the DOM. * Cons: The performance can degrade significantly if there are no matches, as the browser has to perform more work to find an existing element. 2. **getElementById with misses**: * Pros: This method is more predictable and reliable than `querySelector`, especially when there are many elements with matching IDs. * Cons: It can be slower for large numbers of elements due to the need to traverse the entire DOM. 3. **querySelector without misses**: * Pros: When the selector guarantees a match, this method can be faster than `document.getElementById` since it only needs to find an existing element. * Cons: The performance may not be as good as `document.getElementById` when there are no matches, since the browser has to perform more work to traverse the DOM. 4. **getElementById without misses**: * Pros: This method is similar to the previous one but uses `querySelector` instead of `getElementById`. * Cons: Same as above. **Other considerations** The results also depend on the specific browser, device platform, and operating system being used. In this case, Chrome 71 on Linux Desktop shows a pattern: * `querySelector with misses`: Slower than expected (due to potential performance issues when there are no matches) * `getElementById with misses`: Faster but still slower than expected * `querySelector without misses`: Very fast due to the guarantee of finding an existing element * `getElementById without misses`: Similar to the previous one but using `querySelector` instead **Benchmark results** The current benchmark results show: 1. `querySelector with misses`: 264843.25 executions per second (lower than expected) 2. `getElementById with misses`: 509181.1875 executions per second (faster than expected) 3. `querySelector without misses`: 267294.71875 executions per second (very fast) 4. `getElementById without misses`: Similar to the previous one but using `querySelector` instead. In summary, the results suggest that when there are no matches, `document.getElementById` can be faster than `document.querySelector`. However, when there is a guarantee of finding an existing element, `document.querySelector` can be much faster.
Related benchmarks:
Dom benchmark
Dom benchmark
querySelector
Class vs Id Jquery 2
Comments
Confirm delete:
Do you really want to delete benchmark?