In conclusion, never use a querySelector if you have opportunity to use getElementById instead. A similar comparison to have an index scan vs table scan in SQL
A while ago, I was curious how the speed of
querySelectorhas to do a lot more work, so one would expect that it would be slower, but I didn’t know if the difference was enough to care about.
I wrote a little benchmark to test this. You can run it by clicking
. This creates 100,000 elements, and then selects them all in a loop. It does this 105 times, and ignores the first 5 results (to avoid caching effects). It then plots a historgram of the average time per function call (in milliseconds) for each run. There is a template string used in the loop that I’m testing, so the exact numbers are slightly inflated, but in a way that is consistent across both functions.