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):
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.