Kaip parašyti geresnę CSS su „Performance in Mind“

Šiandieniniame pranešime aptarsime kodo pasirinkimus, kuriuos galime padaryti CSS, kad pagerintume svetainės našumą. Tačiau, prieš imdamiesi šių pasirinkimų, pirmiausia trumpai ir glaudžiau žiūrėkime į tinklalapio pateikimo darbo eigą, kad galėtume sutelkti dėmesį įprobleminių (našumo) sričių, kurias galima išspręsti per CSS.

Štai šiurkšta operacijų, kurias atlieka naršyklė po DOM medžio kūrimo:

1. Perskaičiuoti stilių (ir padaryti medžio kūrimą). Naršyklė apskaičiuoja stilius, taikomus DOM medžio elementams. Vėliau sukuriamas atvaizdavimo medis, atmetant mazgus (elementus) iš DOM medžio, kurie neturi būti pateikti (elementai su ekranas: nėra) ir tie, kurie yra (pseudo elementai).
2. Išdėstymas (dar žinomas kaip Reflow). Naudodamas apskaičiuotą stilių iš anksčiau, naršyklė apskaičiuoja kiekvieno puslapio elemento padėtį ir geometriją.
3. Perdažyti. Kai išdėstymas yra suskirstytas, pikseliai nukreipiami į ekraną.
4. Sudėtiniai sluoksniai. Perdažymo metu tapyba gali būti atliekama skirtingais sluoksniais savarankiškai; tada šie sluoksniai galutinai sujungti.

Dabar ir toliau tęskime tai, ką galime padaryti per pirmuosius tris operacijos etapus, kad galėtume parašyti geresnius CSS kodus.

1. Sumažinkite stiliaus skaičiavimus

Kaip minėta anksčiau, „perskaičiavimo stiliaus“ etape naršyklė apskaičiuoja elementams taikomus stilius. Norėdami tai padaryti, naršyklė pirmiausia sužino visus CSS selektorius, nukreipiančius į tam tikrą elemento mazgą DOM medyje. Tada jis pereina visus stiliaus taisykles šiose atrankos priemonėse ir nusprendžia, kurie iš jų bus faktiškai taikomi elementui.

Siekiant išvengti brangių stiliaus skaičiavimų, sumažinti sudėtingus ir giliai įdėtus selektorius taip, kad naršyklė lengviau išsiaiškintų, kuris elementas yra pasirinktas. Tai sumažina skaičiavimo laiką.

Kiti būdai naudoti sumažinti stiliaus taisyklių skaičių (jei įmanoma), nepanaudotų CSS pašalinimas ir vengimas atleidimas iš darbo ir nepaisymas, taip, kad naršyklės stiliaus skaičiavimų metu nereikėtų vėl ir vėl per tą patį stilių.

2. Sumažinkite atspindžius

Elemento pakeitimai arba išdėstymo pakeitimai yra labai „brangūs“ procesai, ir jie gali būti dar didesnė problema, kai elemento, kuris perėjo į išdėstymo pakeitimus, skaičius yra didelis (nes Atspindi hierarchijos pakopą).

Atspindžiai atsiranda dėl elemento išdėstymo pakeitimų, pvz., Geometrinių savybių, pvz., Aukščio arba šrifto dydžio, pakeitimų, klasių įtraukimo į elementus, lango dydžio keitimo, suaktyvinimo : Pakimba, DOM keičiasi pagal „JavaScript“ ir kt.

Kaip ir skaičiuojant stilių, sumažinkite atspindžius, išvengti sudėtingų selektorių ir gilūs DOM medžiai (Vėlgi, tai yra užkirsti kelią pernelyg dideliam „Reflows“ kaupimui).

Jei savo puslapyje turite pakeisti komponento išdėstymo stilius, nukreipti elemento, kuris yra mažiausias elementų hierarchijoje, stilius kad komponentas pagamintas iš. Taip yra todėl, kad išdėstymo pakeitimai nesukelia (beveik) jokių kitų atspindžių.

Jei animuojate elementą, kuris vyksta per išdėstymo pakeitimus, išimkite jį iš puslapio srauto iki visiškai nenustatyta, kadangi „Reflow“ visiškai išdėstyti elementai neturės įtakos likusiems puslapio elementams.

Apibendrinti:

• Tiksliniai elementai, kurie DOM medyje yra mažesni, kai keičiami išdėstymai
• Pasirinkite visiškai išdėstytus elementus, skirtus keisti animaciją
• Jei įmanoma, venkite išdėstymo ypatybių

3. Sumažinkite repainų skaičių

Pakartotinis dažymas - tai taškų piešimas ekrane ir brangus procesas, kaip ir Reflow. Repainus gali sukelti „Reflows“, „lapų slinkimas“, „savybių, spalvų, matomumo ir neskaidrumo pokyčiai“.

Kad išvengtumėte dažnai pasikartojančių, naudokite mažiau savybių, kurios sukelia brangius repainus kaip šešėliai.

Jei animuojate elemento savybes, kurios gali tiesiogiai arba netiesiogiai sukelti pakartotinį atspalvį, tai bus labai naudinga jei šis elementas yra savo sluoksnyje užkirsti kelią jo tapybai, kad jis paveiktų likusią puslapio dalį ir sukurtų aparatūros pagreitį. Techninės įrangos spartinimo metu GPU užims užduotį atlikti sluoksnio animacijos pakeitimus, taupydamas CPU papildomą darbą, tuo pačiu paspartindamas procesą.

Kai kuriose naršyklėse, neskaidrumas (kurių vertė yra mažesnė nei. \ t 1) ir transformuoti (kita vertė nei nė vienas) automatiškai reklamuojami į naujus sluoksnius, o animacijoms ir perėjimams taikoma aparatūros spartinimas. Tokių savybių parinkimas animacijoms yra labai geras.

Tvirtai skatinti elementą į naują sluoksnį ir pereiti į aparatūros pagreitį animacijai yra du būdai:

1. papildyti transformuoti: translate3d (0, 0, 0); į elementą, naršant naršyklę įjungiant aparatūros pagreitį animacijoms ir perėjimams.
2. pridėkite pasikeis elementas, kuris informuoja naršyklę apie savybes, kurios ateityje gali keisti elementą. Pastaba: Sara Soueidan turi išsamų ir labai naudingą straipsnį apie tai Dev.Opera svetainėje.

Apibendrinti:

• Venkite brangių stilių, kurie sukelia pakartojimus
• Ieškokite sluoksnio skatinimo ir techninės įrangos pagreitinimo, kad galėtumėte patirti didelių animacijų ir perėjimų.

Užsirašyti

(1) Taigi dabar mes nepalietėme CSS failo dydžio sumažinimo. Mes minėjome, kad stiliaus taisyklių (ir „DOM“ elementų) sumažinimas žymiai pagerina našumą kiek naršyklė turės dirbti mažiau apie stilių skaičiavimo procesą. Dėl šio kodo sumažinimo rašyti geresnius selektorius ir ištrinti nepanaudotus CSS, failo dydis automatiškai sumažės.

(2) Taip pat patartina neleidžia pernelyg daug pasikeisti elemento stilių „JavaScript“. Vietoj to pridėkite klasę prie elemento (naudojant „JavaScript“), kuriame yra naujų stilių, kad atliktumėte šiuos pakeitimus - tai užkerta kelią nereikalingiems „Reflows“.

(3) Jūs norite venkite išdėstymo taip pat (priverstiniai sinchroniniai atspindžiai), atsirandantys dėl prieigos prie elementų išdėstymo ypatybių ir jų keitimo naudojant „JavaScript“. Skaitykite daugiau apie tai, kaip tai žudo čia.