Az igazság a CSS-szelektor teljesítményéről

Jesszus, hagyd Patrick Brosset, hogy beszéljen a CSS teljesítményéről a lehető legmegközelíthetőbb és legpraktikusabb módon. A CSS nem mindig az mi növeli a sebességet, vagy akár a legalacsonyabb lógó gyümölcs, ha a teljesítmény javításáról van szó.

De if Ha előnyöket keres a CSS oldalán, Patricknek remek módja van a legdrágább szelektorok kiszúrására az Edge DevTools segítségével:

• Nyissa meg a DevTools programot.
• Nyissa meg a Teljesítmény lapot.
• Győződjön meg arról, hogy engedélyezte a „Speciális renderelési műszerezés engedélyezése” opciót. Ez megbotránkoztatott a folyamatban.
• Oldalbetöltés rögzítése.
• Nyissa meg az „Alulról felfelé” lapot a jelentésben.
• Ellenőrizze az újraszámított stílusok méretét.

Innen kattintson az egyik Újraszámított stílus eseményre a Fő vízesés nézetben, és megjelenik egy új „Selector Stats” fül. Nézzétek azt a nyájas jóságot!

Most láthatja az összes feldolgozott kiválasztót, és rendezheti őket aszerint, hogy mennyi ideig tartottak, hányszor egyeztek, az egyeztetési kísérletek száma és valami úgynevezett „gyors elutasítási szám”. tanultam azoknak az elemeknek a száma, amelyek könnyen és gyorsan eltávolíthatók az egyeztetésből.

Sok meglátás van itt, ha valóban a CSS az a szűk keresztmetszet, amelyet ki kell vizsgálni. De olvassa el Patrick teljes bejegyzését a Microsoft Edge Blogon, mert sokkal mélyebben belemegy a miértekbe és a hogyanokba, és végigmegy egy teljes esettanulmányon.

Közvetlen link →

• SEO által támogatott tartalom és PR terjesztés. Erősödjön még ma.
• Platoblockchain. Web3 metaverzum intelligencia. Felerősített tudás. Hozzáférés itt.
• Forrás: https://css-tricks.com/the-truth-about-css-selector-performance/