Kako napisati boljši CSS z zmogljivostjo v mislih

V današnji objavi bomo razmišljali o izbiri kode, ki jo lahko naredimo v CSS-ju za boljšo zmogljivost spletnega mesta. Toda, preden se potopimo v te izbire, najprej naredimo kratek, podrobnejši pregled poteka dela na spletni strani, da se osredotočimo naproblematična področja, ki jih je mogoče rešiti prek CSS.

Tukaj je grob potek operacij, ki jih brskalnik izvede po izdelavi drevesa DOM:

1. Ponovni izračun sloga (in ustvarjanje drevesa). Brskalnik izračuna sloge, ki bodo uporabljeni za elemente v drevesu DOM. Pozneje se ustvari drevo upodabljanja, medtem ko zavrže vozlišča (elemente) iz drevesa DOM, ki se ne prikazujejo (elementi z prikaz: nič) in tiste, ki so (psevdoelementi).
2. Postavitev (ali popravek). Z uporabo izračunanega sloga od prej, brskalnik izračuna položaj in geometrijo vsakega elementa na strani.
3. Prebarvanje. Ko je postavitev preslikana, so piksli narisani na zaslon.
4. Kompozitni sloji. Med prebarvanjem se lahko slika samostojno izvaja v različnih slojih; te plasti se nato končno združijo.

Zdaj pa nadaljujmo s tem, kaj lahko storimo v prvih treh fazah operacije za pisanje bolj uspešnih kod CSS.

1. Zmanjšajte izračune slog

Kot že omenjeno, brskalnik v fazi "Preračunaj slog" izračuna sloge, ki jih je treba uporabiti za elemente. V ta namen brskalnik najprej najde vse selektorje v CSS-ju, ki kažejo na določeno vozlišče elementov v drevesu DOM. Potem gre skozi vsa pravila slogov v teh selektorjih in odloči, katere naj se dejansko uporabijo za element.

Da bi se izognili dragim stilom, zmanjšati kompleksne in globoko ugnezdene selektorje da bo brskalnik lažje ugotovil, na kateri element se selektor nanaša. To zmanjšuje čas računanja.

Drugi načini zaposlovanja vključujejo zmanjšanje števila pravil slog (če je mogoče), odstranjevanje neuporabljenega CSS-ja in izogibanje redundance & overrides, tako, da brskalniku ni treba vedno znova skozi isti slog med slogskimi izračuni.

2. Zmanjšajte vrnitve

Vrnjene ali postavitvene spremembe v elementu so zelo "dragi" procesi in so lahko še večji problem, če ima element, ki je šel skozi spremembo postavitve, precejšnjo količino otrok (ker Reflow kaskadira po hierarhiji).

Povračila se sprožijo s spremembami postavitve elementa, kot so spremembe geometrijskih lastnosti, kot so višina ali velikost pisave, dodajanje ali odstranjevanje razredov elementom, spreminjanje velikosti okna, aktiviranje : hover, DOM spreminja JavaScript, itd.

Tako kot pri izračunu slog, da bi zmanjšali Reflows, izogibajte se kompleksnim selektorjem in globoka drevesa DOM (ponovno, to je, da se prepreči prekomerno kaskadno nalaganje vračil).

Če morate spremeniti sloge postavitve komponente v vaši strani, ciljno usmerite sloge elementa, ki je najnižji v hierarhiji elementov sestavnega dela. To je tako, da spremembe postavitve ne sprožijo (skoraj) nobene druge povratne povezave.

Če animirate element, ki gre skozi spremembe postavitve, vzemite iz toka strani jo ga popolnoma odsotno, ker Reflow v absolutno postavljenih elementih ne bo vplival na ostale elemente na strani.

Povzeti:

• Ciljne elemente, ki so nižji v drevesu DOM, ko spreminjate postavitev
• Izberite popolnoma pozicionirane elemente za animacije pri spreminjanju postavitve
• Izogibajte se animiranju lastnosti postavitve, kadar je to mogoče

3. Zmanjšajte preboje

Preoblikovanje se nanaša na risanje pikslov na zaslonu in je drag proces, tako kot Reflow. Ponastavitve lahko sprožijo Reflows, drsenje strani, spremembe lastnosti, kot so barva, vidljivost in motnost.

Da bi se izognili pogostim in ogromnim ponovnim slikam, uporabite manj lastnosti, ki povzročajo drago prebarvanje kot sence.

Če animirate lastnosti elementa, ki lahko neposredno ali posredno sproži Repaint, bo to zelo koristno če je ta element v svoji plasti preprečuje, da bi njena slikarska slika vplivala na preostalo stran in sprožila strojno pospeševanje. Pri pospeševanju strojne opreme bo GPU prevzel nalogo izvajanja sprememb v animaciji v plasti, s čimer bo prihranil dodatno delo CPU-ja in pospešil postopek.

V nekaterih brskalnikih, motnosti (z vrednostjo, manjšo od. \ t 1) in transform (vrednost, ki ni. \ t nobena) se samodejno promovirajo v nove plasti, strojno pospeševanje pa se uporablja za animacije in prehode. Prednost teh lastnosti za animacije je torej dobra.

Za silovito spodbujajo element v novo plast in gredo v strojno pospeševanje za animacijo sta na voljo dve tehniki:

1. add transform: translate3d (0, 0, 0); elementu, ki brskalnika prelisiči, da sproži strojno pospeševanje za animacije in prehode.
2. dodajte se bo spremenil element, ki obvesti brskalnik o lastnostih, ki se bodo verjetno spremenile v elementu v prihodnosti. Opomba: Sara Soueidan ima poglobljen in izredno koristen članek o tem na strani Dev.Opera.

Povzeti:

• Izogibajte se dragih slogov, ki povzročajo prebarvanje
• Poiščite promocijo sloja in strojno pospeševanje za obsežne animacije in prehode.

Opomba

(1) Torej do zdaj se nismo dotaknili zmanjšanja velikosti datoteke CSS. Omenili smo, da zmanjšanje pravil za slog (in elementov DOM) bistveno izboljša učinkovitost zaradi koliko bo brskalnik moral delovati manj o procesu izračunavanja slogov. Posledica tega zmanjšanja kode je pisanje boljših selektorjev in brisanje neuporabljenega CSS-ja, velikost datoteke se bo samodejno zmanjšala.

(2) Priporočljivo je tudi ne vnašajte preveč posledičnih sprememb slogov elementa v JavaScriptu. Namesto tega dodajte razred elementu (s pomočjo JavaScripta), ki vsebuje nove sloge, da bi naredili te spremembe - to preprečuje nepotrebna povračila.

(3) Boste želeli Izogibajte se Layout Thrashing tudi (prisilno sinhrono vračanje), ki nastane zaradi dostopa in spreminjanja lastnosti postavitve elementov z uporabo JavaScripta. Preberite več o tem, kako to ubija uspešnost tukaj.