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.