Tips & Tricks #38

Can I find expensive CSS selectors?

Edge

1. In the Performance panel, Enable "advanced rendering instrumentation (slow)" in Settings.

2. Click Record, and perform the operation on the page that affects rendering.

3. In the recorded profile, identify a long style recalculation and select it in the waterfall view (“Main” section).

4. In the bottom tab bar, click Selector Stats. Sort the selectors based on Elapsed Time, Match Attempts etc., to identify expensive selectors.

canidev.tools/find-expensive-selectors/edge