Skip to main content Skip to secondary navigation Accessibility Feedback

JavaScript Selector Performance

One of the students in my Vanilla JS Guidebook Slack channel asked me about the performance difference between querySelector() and things like getElementById() and getElementsByClassName().

Specifically, getElementById() and getElementsByClassName() are more than twice as fast as querySelector() and querySelectorAll().

So, that’s bad, right? I honestly don’t think it matters.

getElementById() can run about 15 million operations a second, compared to just 7 million per second for querySelector() in the latest version of Chrome. But that also means that querySelector() runs 7,000 operations a millisecond. A millisecond. Let that sink in.

That’s absurdly fast. Period.

Yes, getElementById() and getElementsByClassName() are faster. But the flexibility and consistency of querySelector() make the obvious muscle-memory choice for my projects.

And it’s not slow. It’s just not as fast.

Have any questions or comments about this post? Email me at or contact me on Twitter at @ChrisFerdinandi.

Get Daily Developer Tips