Kako napisati bolji CSS s performansama u umu

U današnjem postu razmotrit ćemo mogućnosti odabira koda koje možemo napraviti u CSS-u za poboljšanu izvedbu web-lokacije. No, prije nego što uđemo u te izbore, hajde da prijeđemo na kratak, bliži pogled na tijek rada web stranice kako bismo se usredotočili naproblematična područja koja su rješiva ​​putem CSS-a.

Evo grubog tijeka operacija koje je izvršio preglednik nakon stvaranja DOM stabla:

1. Ponovno izračunaj stil (i izradi stablo). Preglednik izračunava stilove koji će se primijeniti na elemente u DOM stablu. Stablo renderiranja kasnije se stvara dok odbacuje čvorove (elemente) iz DOM stabla koji se ne prikazuju (elementi s display: none) i onih koji su (pseudo-elementi).
2. Izgled (aka Reflow). Korištenjem izračunatog stila od prije, preglednik izračunava položaj i geometriju svakog elementa na stranici.
3. Prefarbati. Kada se raspored mapira, pikseli se privlače na zaslon.
4. Složeni slojevi. Tijekom repaintinga, slikanje se može obavljati u različitim slojevima samostalno; ti se slojevi zatim konačno spajaju.

Sada ćemo nastaviti s onim što možemo učiniti u prve tri faze operacije za pisanje CSS kodova s ​​boljom izvedbom.

1. Smanjite izračune stila

Kao što je već spomenuto, u fazi "Ponovno izračunaj stil" preglednik izračunava stilove koji će se primijeniti na elemente. Da biste to učinili, preglednik najprije pronalazi sve selektore u CSS-u koji upućuju na određeni čvor elementa u DOM stablu. Zatim prolazi kroz sva pravila stila u tim selektorima i odlučuje koje će se zapravo primijeniti na element.

Da biste izbjegli skupe izračune stila, smanjiti složene i duboko ugniježđene selektore tako da je pregledniku lakše shvatiti na koji element selektor misli. Time se smanjuje vrijeme računanja.

Drugi načini zapošljavanja uključuju smanjiti broj pravila stila (gdje je moguće), uklanjanje neiskorištenog CSS-a i izbjegavanje redundancija i nadjačavanja, tako da preglednik ne mora ponovno i ponovno prolaziti kroz isti stil tijekom izračuna stila.

2. Smanjite povrat

Reflow ili promjene izgleda u elementu su vrlo "skupi" procesi, i mogu biti još veći problem kada element koji je prošao kroz promjenu izgleda ima značajnu količinu djece (jer Reflow kaskade niz hijerarhiju).

Reflow se pokreću promjenama izgleda elementa, kao što su promjene geometrijskih svojstava kao što su visina ili veličina fonta, dodavanje ili uklanjanje klasa elementima, promjena veličine prozora, aktiviranje : hover, DOM mijenja JavaScript, itd.

Baš kao u stilu izračuna, smanjiti Reflows, izbjegavajte složene selektore i duboka DOM stabla (opet, to je kako bi se spriječilo prekomjerno kaskadiranje povratnih podataka).

Ako morate promijeniti stilove izgleda komponente na stranici, ciljati stilove elementa koji je najniži u hijerarhiji elemenata od koje je sastavnica napravljena. To je tako da promjene izgleda ne pokreću (gotovo) bilo koji drugi Reflow.

Ako animirate element koji prolazi kroz promjene izgleda, izvadite iz toka stranice po apsurdno pozicioniranje, budući da Reflow u apsolutno pozicioniranim elementima neće utjecati na ostale elemente na stranici.

Sažeti:

• Ciljani elementi koji su niži u DOM stablu prilikom izmjene izgleda
• Odaberite apsolutno pozicionirane elemente za animacije za promjenu izgleda
• Izbjegavajte animiranje svojstava izgleda kad god je to moguće

3. Smanjite boje

Preoblikovanje se odnosi na crtanje piksela na zaslonu i skup je proces poput Reflowa. Replike se mogu pokrenuti Reflowovima, pomicanjem stranice, promjenama svojstava kao što su boja, vidljivost i neprozirnost.

Da bi se izbjegla česta i velika ponavljanja, koristite manje svojstava koja uzrokuju skupe boje kao sjene.

Ako animirate svojstva elementa koji mogu izravno ili neizravno pokrenuti Repaint, to će biti od velike prednosti ako je taj element u svom sloju sprječavanje da njezino slikanje utječe na ostatak stranice i pokreće hardversko ubrzanje. U ubrzanju hardvera, GPU će preuzeti zadaću izvođenja promjena u animaciji u sloju, štedeći dodatni rad procesora dok ubrzava proces.

U nekim preglednicima, neprozirnost (s vrijednošću manjom od 1) i transformirati (vrijednost različita od nijedan) automatski se promiču u nove slojeve, a hardversko ubrzanje primjenjuje se za animacije i prijelaze. Preferiranje ovih svojstava za animacije je stoga dobro.

Na silu promicanje elementa u novi sloj i prelazak u hardversko ubrzanje za animaciju postoje dvije tehnike:

1. dodati transformacija: translate3d (0, 0, 0); na element, prevariti preglednik da pokrene hardversko ubrzanje za animacije i prijelaze.
2. dodajte će promijeniti na element koji obavještava preglednik o svojstvima koja će se vjerojatno promijeniti u elementu u budućnosti. Bilješka: Sara Soueidan ima detaljan i iznimno koristan članak o tome u Dev.Opera siteu.

Sažeti:

• Izbjegavajte skupe stilove koji uzrokuju Repaints
• Tražiti promicanje sloja i hardversko ubrzanje za velike animacije i prijelaze.

Uzeti na znanje

(1) Dakle, do til sada, nismo dotaknuti na CSS datoteku smanjenje veličine. Spomenuli smo da smanjenje pravila stila (i DOM elemenata) značajno poboljšava performanse zbog koliko će preglednik morati raditi manje o procesu računanja stilova. Kao posljedica ovog smanjenja koda, pisanje boljih selektora i brisanje neiskorištenog CSS-a, veličina datoteke će se automatski smanjiti.

(2) Također je poželjno nemojte praviti previše posljedičnih promjena stilova elementa u JavaScriptu. Umjesto toga dodajte klasu elementu (pomoću JavaScripta) koji sadrži nove stilove da biste izvršili te promjene - to sprječava nepotrebne povratne veze.

(3) Vi ćete to htjeti izbjeći Layout Thrashing također (prisilni sinkroni reflow) koji nastaje zbog pristupa i modificiranja svojstava Layout-a elemenata pomoću JavaScripta. Pročitajte više o tome kako ovdje ubija izvedbu.