Can I DevTools?

Share this post

Tips & Tricks #38

canidevtools.substack.com

Tips & Tricks #38

Can I find expensive CSS selectors?

Pankaj Parashar
Feb 5, 2023
Share
Share this post

Tips & Tricks #38

canidevtools.substack.com

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
Share
Share this post

Tips & Tricks #38

canidevtools.substack.com
Previous
Next
Comments
Top
New

No posts

Ready for more?

© 2023 Pankaj Parashar
Privacy ∙ Terms ∙ Collection notice
Start WritingGet the app
Substack is the home for great writing