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.