4 ms·
The performance difference is negligible. Both methods can return 70k-100k selections in 10ms.
by devmor 4y ago
The performance difference is negligible. Both methods can return 70k-100k selections in 10ms.
- masswerk 4y agoI had projects where this contributed to a visibly perceivable difference. This may have involved SVG, though.
- devmor 4y agoOh I can definitely see that coming up with SVG or deep extensive XML trees yeah.
- esprehn 4y agoOn 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:third_party/blink/renderer/core/css/selector_query.cc;drc=a432cd59d51281057ba2a2673ca645a9600bb927;l=347 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:third_party/blink/renderer/core/css/selector_query.cc;drc=a432cd59d51281057ba2a2673ca645a9600bb927;l=497 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.