Hogyan írjunk jobb CSS-t a teljesítmény szem előtt tartásával

A mai bejegyzésben megvizsgáljuk a CSS-ben elérhető kódválasztásokat a webhely jobb teljesítménye érdekében. De mielőtt bemerülnénk ezekbe a választásokba, először vegyünk egy rövid, közelebbi pillantást a weboldal megjelenítési munkafolyamatára, hogy összpontosítsunk aproblémás (teljesítmény) területek, amelyek megoldhatók a CSS-en keresztül.

Íme a böngésző által a DOM fa létrehozása után végrehajtott műveletek durva áramlása:

1. A stílus újraszámítása (és a fa létrehozásának rendezése). A böngésző kiszámítja a DOM-fa elemeihez alkalmazandó stílusokat. A renderelő fa később létrejön, miközben eldobja a csomópontokat (elemeket) a DOM-fáról, amelyeket nem kell megjeleníteni (elemek a display: none) és azok, amelyek (pszeudo-elemek).
2. Elrendezés (más néven Reflow). A számított stílust használva a böngésző kiszámítja az oldal minden elemének helyét és geometriáját.
3. Átfest. Az elrendezés leképezése után a képpontok a képernyőre kerülnek.
4. Kompozit rétegek. Az átfestés során a festmény különálló rétegekben történhet; ezeket a rétegeket ezután végül egyesítjük.

Most folytassuk a művelet első három szakaszában, hogy jobban teljesíthessük a CSS kódokat.

1. Csökkentse a stílusszámításokat

Mint korábban említettük, a "Stal" újraszámítása szakaszban a böngésző kiszámítja az elemekhez alkalmazandó stílusokat. Ehhez a böngésző először megkeresi a CSS összes szelektort, amely a DOM-fa adott elemcsomópontjára mutat. Ezután az összes szelektálási szabályt átmegy ezekben a szelektorokban, és eldönti, hogy melyiket kell ténylegesen alkalmazni az elemre.

A költséges stílusszámítások elkerülése érdekében, a komplex és mélyen beágyazott szelektorok csökkentése hogy a böngésző könnyebben tudja kitalálni, hogy melyik elemre vonatkozik a választó. Ez csökkenti a számítási időt.

Az alkalmazás egyéb módjai közé tartozik a a stílusszabályok számának csökkentése (ahol lehetséges), a nem használt CSS eltávolítása és elkerülve redundancia és felülbírálás, így a böngészőnek nem kell újra és újra átmennie a stílus számításai során.

2. Csökkentse a visszaverődéseket

Egy elemben a visszaverődések vagy az elrendezés változásai nagyon „drága” folyamatok, és még nagyobb problémát jelenthetnek, ha az elrendezésváltozásokon átesett elemnek jelentős mennyiségű gyermeke van (mivel A hierarchiában a kaszkádot visszahelyezi).

A visszaverődéseket az elrendezés megváltoztatja egy elemre, mint például a geometriai tulajdonságok, például a magasság vagy a betűméret változása, az osztályok elemeinek hozzáadása vagy eltávolítása, ablak átméretezése, aktiválása :lebeg, A DOM módosítja a JavaScriptet stb.

Csakúgy, mint a stílusszámításban, a Reflows csökkentése, a komplex szelektorok elkerülése és mély DOM fák (ez ismét megakadályozza a Reflows túlzott lépcsőzését).

Ha módosítania kell az oldal elrendezési stílusát, célozza meg az elem hierarchiájában a legalacsonyabb stílust hogy az alkatrész készül. Ez azért van, hogy az elrendezésváltozások nem okoznak (majdnem) semmilyen más Reflows-t.

Ha olyan elemet animál, amely az elrendezés megváltozik, vegye ki az oldalfolyamból által abszurd helymeghatározás, mivel a Reflow teljesen elhelyezett elemekben nem befolyásolja az oldal többi elemét.

Összefoglalni:

• Célelemek, amelyek a DOM fában alacsonyabbak az elrendezés megváltoztatásakor
• Válasszon teljesen elhelyezett elemeket az elrendezés megváltoztatásához
• Kerülje az elrendezés tulajdonságainak animálását, amikor csak lehetséges

3. Csökkentse a repaint

Az újranyomtatás a képpontok rajzolására vonatkozik a képernyőn, és költséges folyamat, mint a Reflow. A repainokat a Reflows, az oldal görgetés, a tulajdonságok, például a szín, a láthatóság és az opacitás változásai indíthatják.

A gyakori és hatalmas újjászületések elkerülése érdekében, használjon kevesebbet a költséges újrafelhasználást okozó tulajdonságok közül mint az árnyékok.

Ha egy elem olyan tulajdonságait animálja, amely közvetlenül vagy közvetve kiválthatja az újrafestést, nagy előnye lesz ha az elem saját rétegében van megakadályozza, hogy a festés prcoess hatása befolyásolja az oldal többi részét, és meggyorsítsa a hardveres gyorsítást. A hardveres gyorsítás során a GPU feladata az animációs változások végrehajtása a rétegben, a CPU extra munkájának megtakarítása, miközben felgyorsítja a folyamatot.

Egyes böngészőkben, átlátszatlanság (amelynek értéke kevesebb mint. \ t 1) és átalakít (egyéb érték, mint egyik sem) automatikusan új rétegekre kerülnek, és az animációk és átmenetek esetében a hardveres gyorsítást alkalmazzák. Ezeknek a tulajdonságoknak az előnyben részesítése annyira jó.

Erőteljesen az új réteg elemeinek előmozdítása és hardveres gyorsítás az animációhoz kétféle módszer van:

1. hozzáad transzformáció: translate3d (0, 0, 0); az elemhez, a böngészőt a hardveres gyorsítás aktiválásához az animációkhoz és az átmenetekhez.
2. adja hozzá a meg fog változni az elemhez tartozó tulajdonság, amely tájékoztatja a böngészőt azokról a tulajdonságokról, amelyek a jövőben valószínűleg megváltoznak az elemben. jegyzet: Sara Soueidannak van egy mélyreható és szuper-hasznos cikke a Dev.Opera oldalon.

Összefoglalni:

• Kerülje a drága stílusokat, amelyek repaineket okoznak
• Keresse fel a réteg promócióját és a hardveres gyorsítást az izmos animációk és átmenetek számára.

Írd fel

(1) Tehát most már nem érintkeztünk a CSS fájlméret csökkentésével. Megemlítettük, hogy a stílusszabályok (és a DOM elemek) csökkentése jelentős teljesítményjavulást tesz lehetővé mennyit kell működnie a böngészőnek Kevésbé a stílusok számítási folyamatáról. A kódcsökkentés következtében jobb választók írása és a nem használt CSS törlése, a fájlméret automatikusan csökken.

(2) Azt is ajánlatos nem tesz túl sok következményes változást az elem stílusaiban a JavaScript-ben. Ehelyett adjon hozzá egy osztályt az elemhez (a JavaScript használatával), amely az új stílusokat tartja a módosítások elvégzéséhez - ez megakadályozza a felesleges Reflows-ot.

(3) Akarod kerülje el az elrendezést (kényszerített szinkron reflows) is, amely az elemek elrendezési tulajdonságainak a JavaScript használatával való elérése és módosítása miatt keletkezik. Tudjon meg többet arról, hogy ez hogyan ölti meg a teljesítményt.