Skip to main content Accessibility Feedback

JavaScript Selector Performance

One of the students in my Vanilla JS 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.


🚀 Make 2018 the year you master JavaScript! My pocket guides and mini courses are short, focused, and made for beginners. You can do this!

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

Get Daily Developer Tips