Milyen csapdák merülhetnek fel a CSS teljesítményének optimalizálása során?

• A túlzott összetett szelektorok használata: Olyan szelektorok, mint a > * vagy :nth-child, lassúak lehetnek a böngésző számára az elemek keresésekor.
• @import használata: Az @import további HTTP-kéréseket generál, és blokkolja a stílusok párhuzamos betöltését, ami lassítja az oldal renderelését.
• Nem használt rövid tulajdonságok: Több tulajdonság (pl. margin-top, margin-bottom) meghatározása a margin rövid tulajdonság helyett növelheti a fájl méretét és a parse időt.
• Nagy mennyiségű !important szabály: Az !important használata megzavarja a kaskádot, és megnehezíti a hibakeresést és a stílusok karbantartását.
• Felesleges CSS használata: Olyan stílusok, amelyek nem alkalmazhatók egyik elemre sem az oldalon, növelik a fájl méretét.
• Nem optimalizált képek: A CSS-ben használt képek (pl. háttérként) tömörítettek legyenek, és megfelelő formátumban.
• Hiányzik a minifikálás és tömörítés: A CSS fájlokat minifikálni és tömöríteni kell (pl. Gzip), hogy csökkentsük a méretet és gyorsítsuk a betöltést.
• Sok kis CSS fájl: Sok kis CSS fájl növeli a HTTP-kérések számát.
• Renderelés blokkolása: A CSS alapértelmezés szerint blokkolja a renderelést. A CSS betöltésének helytelen szervezése (pl. nem kritikus stílusok a fájl elején) késleltetheti a renderelést.
• Nem szabványos betűtípusok használata optimalizálás nélkül: Sok betűtípus vagy nem optimalizált betűtípus (pl. al-töredékek nélkül) lassíthatja az oldal betöltését.
• Nagy DOM-fák: Még optimalizált CSS esetén is, összetett és mély DOM-fák lassíthatják a stílusok alkalmazását és az újrarajzolást.
• CSS animációk, amelyek gyakori stílus- és elrendezés-újraszámításokat okoznak: Az olyan tulajdonságok használata, mint a left/top a transform helyett, drágább lehet a böngésző számára.
• Nem megfelelő média lekérdezések használata: Túl sok vagy nem optimalizált média lekérdezés növelheti a stílusok feldolgozási idejét.
• Teljesítmény elemzés hiánya: Eszközök, mint például a Chrome DevTools Performance tab nélkül, nehéz azonosítani a szűk keresztmetszeteket.

/* Hatékonytalan selector példája */
body > * {
    margin: 0;
}

/* Hatékonyabb selector példája */
.container {
    margin: 0;
}

/* Kerülje az @import használatát */
@import url('other.css');

/* Inkább használjon <link>-et az HTML-ben */

/* Ehelyett */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

/* Használja a rövid tulajdonságot */
margin: 10px 20px;