Sannheten om CSS-velgerytelse

Jøss, la det være Patrick Brosset for å snakke om CSS-ytelse på en mest mulig tilgjengelig og praktisk måte. Ikke at CSS alltid er det hva er det som øker farten, eller til og med den lavest hengende frukten når det gjelder å forbedre ytelsen.

Men if du ser etter gevinster på CSS-siden av ting, Patrick har en fin måte å snuse opp de dyreste velgerne dine ved å bruke Edge DevTools:

• Åpne DevTools.
• Gå til fanen Ytelse.
• Sørg for at du har «Aktiver avansert gjengivelsesinstrumentering»-alternativet aktivert. Dette snublet meg i prosessen.
• Registrer en sideinnlasting.
• Åpne fanen "Bottom-Up" i rapporten.
• Sjekk størrelsen på de omkalkulerte stilene dine.

Herfra klikker du på en av Recalculated Style-hendelsene i hovedfossen, og du får en ny "Velgerstatistikk"-fane. Se på all den klissete godheten!

Nå ser du alle velgerne som ble behandlet, og de kan sorteres etter hvor lang tid de tok, hvor mange ganger de samsvarte, antall samsvarende forsøk og noe som kalles "rask avvisningsantall" som Jeg lærte er antallet elementer som var enkle og raske å eliminere fra samsvar.

Mye innsikt her om CSS virkelig er flaskehalsen som må undersøkes. Men les hele innlegget til Patrick på Microsoft Edge-bloggen fordi han går mye dypere inn i hvorfor og hvordan, og går gjennom en hel case-studie.

Direkte lenke →

• SEO-drevet innhold og PR-distribusjon. Bli forsterket i dag.
• Platoblokkkjede. Web3 Metaverse Intelligence. Kunnskap forsterket. Tilgang her.
• kilde: https://css-tricks.com/the-truth-about-css-selector-performance/