Hacker News new | ask | show | jobs
by devmor 1355 days ago
The performance difference is negligible. Both methods can return 70k-100k selections in 10ms.
2 comments
esprehn 1355 days ago
On what hardware?

Also there's a performance cliff when you have a lot of unique ids (or selectors in use from JS).

When you hit the cache querySelector is primarily a getElementById call and then some overhead to match the selector a second time (which chrome should really optimize):

https://source.chromium.org/chromium/chromium/src/+/main:thi...

But if you have more than 256 selectors and ids in use:

https://source.chromium.org/chromium/chromium/src/+/main:thi...

You'll start to hit the selector parser a lot more and then querySelector will be a fair bit slower going through the CSS parser.

link
masswerk 1355 days ago
I had projects where this contributed to a visibly perceivable difference. This may have involved SVG, though.
link
devmor 1355 days ago
Oh I can definitely see that coming up with SVG or deep extensive XML trees yeah.
link