Sanningen om CSS-väljarens prestanda

Jösses, låt det vara Patrick Brosset för att prata CSS-prestanda på ett så lättillgängligt och praktiskt sätt som möjligt. Inte för att CSS alltid är det vad är det som höjer farten, eller till och med den lägst hängande frukten när det gäller att förbättra prestanda.

Men if du letar efter vinster på CSS-sidan av saker, har Patrick ett bra sätt att sniffa upp dina dyraste väljare med Edge DevTools:

• Öppna DevTools.
• Gå till fliken Prestanda.
• Se till att du har alternativet "Aktivera avancerad renderingsinstrumentering" aktiverat. Detta gjorde mig snubblad under processen.
• Spela in en sidladdning.
• Öppna fliken "Bottom-Up" i rapporten.
• Kolla in storleken på dina omräknade stilar.

Härifrån klickar du på en av de omräknade stilhändelserna i huvudvattenfallsvyn och du får en ny "Väljarstatistik"-flik. Titta på allt det där goa godheten!

Nu ser du alla väljare som bearbetades och de kan sorteras efter hur lång tid de tog, hur många gånger de matchade, antalet matchningsförsök och något som kallas "snabbt avslagsantal" som jag lärde är antalet element som var lätta och snabba att eliminera från matchning.

Många insikter här om CSS verkligen är flaskhalsen som behöver undersökas. Men läs hela Patricks inlägg på Microsoft Edge-bloggen eftersom han går mycket djupare in i varför och hur, och går igenom en hel fallstudie.

Direktlänk →

• SEO-drivet innehåll och PR-distribution. Bli förstärkt idag.
• Platoblockchain. Web3 Metaverse Intelligence. Kunskap förstärkt. Tillgång här.
• Källa: https://css-tricks.com/the-truth-about-css-selector-performance/