De waarheid over de prestaties van de CSS-selector

Jeetje, laat maar Patrick Brosset om te praten over CSS-prestaties zo laagdrempelig en praktisch mogelijk. Niet dat CSS dat altijd is wat drijft de snelheid op, of zelfs het laagst hangende fruit als het gaat om prestatieverbetering.

Maar if je bent op zoek naar winst aan de CSS-kant, Patrick heeft een leuke manier om je duurste selectors op te sporen met behulp van Edge DevTools:

• Open DevTools.
• Ga naar het tabblad Prestaties.
• Zorg ervoor dat de optie "Geavanceerde weergave-instrumentatie inschakelen" is ingeschakeld. Dit heeft me in het proces doen struikelen.
• Registreer het laden van een pagina.
• Open het tabblad "Bottom-Up" in het rapport.
• Bekijk de maat van je opnieuw berekende stijlen.

Klik vanaf hier op een van de herberekende stijlgebeurtenissen in de hoofdwatervalweergave en je krijgt een nieuw tabblad 'Selectorstatistieken'. Kijk eens naar al die kleverige goedheid!

Nu zie je alle kiezers die zijn verwerkt en ze kunnen worden gesorteerd op hoe lang ze duurden, hoe vaak ze overeenkwamen, het aantal overeenkomende pogingen en iets dat "snelle afwijzingstelling" wordt genoemd. Ik heb geleerd is het aantal elementen dat gemakkelijk en snel uit de matching kon worden verwijderd.

Veel inzichten hier als CSS echt het knelpunt is dat moet worden onderzocht. Maar lees het volledige bericht van Patrick op de Microsoft Edge Blog, want hij gaat veel dieper in op het hoe en waarom en neemt een hele casestudy door.

Directe link →

• Door SEO aangedreven content en PR-distributie. Word vandaag nog versterkt.
• Platoblockchain. Web3 Metaverse Intelligentie. Kennis versterkt. Toegang hier.
• Bron: https://css-tricks.com/the-truth-about-css-selector-performance/