Can I DevTools?
All
151
Accessibility
9
Audit
2
CSS
36
Console
14
Elements
27
JavaScript
5
Network
27
Other
18
Performance
1
Sources
12
Favorites
0
About
Testimonials
It is like
@CanIUse
but for the browser devtools, created & curated by
@pankajparashar
. Get weekly tips & tricks for your favorite browser devtools by
subscribing
to the newsletter!
Ads via Carbon
1
2
3
4
Twitter
Github
Substack
Theme
CSS
Edit
Find expensive CSS selectors
Can I find expensive CSS selectors?
Last Modified
3 months ago
Authors
@pankajparashar
Test Live
via
BrowserStack
Newsletter
tips-tricks-38
Related (0)
EDGE
Share
Notes
In the
Performance
panel, Enable "advanced rendering instrumentation (slow)" in
Settings
.
Click
Record
, and perform the operation on the page that affects rendering.
In the recorded profile, identify a long style recalculation and select it in the waterfall view (“Main” section).
In the bottom tab bar, click
Selector Stats.
Sort the selectors based on Elapsed Time, Match Attempts etc., to identify expensive selectors.
References (1)
"The truth about CSS selector performance", by
Patrick Brosset