Sandheden om CSS-vælgerens ydeevne

Puha, lad det være Patrick Brosset for at tale om CSS-ydelse på den mest imødekommende og praktiske måde som muligt. Ikke at CSS altid er det hvad sætter farten op, eller endda den lavest hængende frugt, når det kommer til at forbedre ydeevnen.

Men if du leder efter gevinster på CSS-siden af ​​tingene, har Patrick en god måde at opsnuse dine dyreste vælgere ved hjælp af Edge DevTools:

• Åbn DevTools.
• Gå til fanen Performance.
• Sørg for, at du har muligheden "Aktiver avanceret gengivelsesinstrumentering" aktiveret. Dette væltede mig i processen.
• Optag en sideindlæsning.
• Åbn fanen "Bottom-Up" i rapporten.
• Tjek størrelsen på dine genberegnet styles.

Herfra skal du klikke på en af ​​Genberegnet stil-begivenheder i hovedvandfaldsvisningen, og du får en ny "Vælgerstatistik"-fane. Se på al den klæbrige godhed!

Nu ser du alle de vælgere, der blev behandlet, og de kan sorteres efter, hvor lang tid de tog, hvor mange gange de matchede, antallet af matchende forsøg og noget, der kaldes "hurtigt afvisningsantal", som jeg lærte er antallet af elementer, der var nemme og hurtige at eliminere fra matchning.

En masse indsigt her, hvis CSS virkelig er flaskehalsen, der skal undersøges. Men læs Patricks fulde indlæg på Microsoft Edge-bloggen, fordi han går meget dybere ind i hvorfor og hvordan, og gennemgår et helt casestudie.

Direkte link →

• SEO Powered Content & PR Distribution. Bliv forstærket i dag.
• Platoblokkæde. Web3 Metaverse Intelligence. Viden forstærket. Adgang her.
• Kilde: https://css-tricks.com/the-truth-about-css-selector-performance/