Kā rakstīt labāku CSS ar veiktspēju prātā

Šodienas amatā mēs pārdomāsim par kodu izvēli, ko mēs varam veikt CSS, lai uzlabotu vietnes veiktspēju. Taču, pirms mēs ieniramies šajās izvēlēs, vispirms īsi apskatīsim tīmekļa lapas atveidošanas darbplūsmu, lai koncentrētos uzproblemātiskas (sniegumu) jomas, kas ir risināmas, izmantojot CSS.

Šeit ir aptuvena operāciju plūsma, ko pārlūks veic pēc DOM koku izveides:

1. Pārrēķināt stilu (un padarīt koku izveidi). Pārlūks aprēķina DOM koka elementiem piemērojamos stilus. Vēlāk tiek izveidots atveidošanas koks, bet atmetot mezglus (elementus) no DOM koka, kas nav jāsniedz (elementi ar displejs: nav) un tie, kas ir (pseidoelementi).
2. Izkārtojums (aka Reflow). Izmantojot iepriekš aprēķināto stilu, pārlūks aprēķina katra elementa atrašanās vietu un ģeometriju lapā.
3. Pārkrāsot. Kad izkārtojums ir kartēts, pikseļi tiek novilkti uz ekrānu.
4. Kompozītu slāņi. Pārkrāsošanas laikā glezna var tikt veikta dažādos slāņos patstāvīgi; šie slāņi pēc tam beidzot tiek apvienoti.

Tagad turpināsim to, ko mēs varam darīt pirmajos trīs darbības posmos, lai rakstītu labākus CSS kodus.

1. Samaziniet stila aprēķinus

Tāpat kā iepriekš minēts, pārlūkprogrammā "Pārrēķināt stilu" aprēķina elementiem piemērojamos stilus. Lai to izdarītu, pārlūkprogramma vispirms noskaidro visus CSS selektorus, kas norāda uz konkrētu elementa mezglu DOM kokā. Tad tas iziet visus stila noteikumus šajos selektoros un nolemj, kuri no tiem ir faktiski jāpiemēro elementam.

Lai izvairītos no dārgiem stila aprēķiniem, samazināt sarežģītus un dziļi ligzdotus selektorus lai pārlūkprogrammai būtu vieglāk noskaidrot, kurš elements ir selektors. Tas samazina skaitļošanas laiku.

Citi veidi, kā izmantot samazināt stila noteikumu skaitu (kur iespējams), neizmantoto CSS noņemšana un izvairīšanās atlaišana un ignorēšana, tā, lai pārlūkprogrammai stila aprēķinu laikā atkal un atkal nebūtu jāiet cauri tam pašam stilam.

2. Samaziniet atspīdumus

Izmaiņas vai izkārtojuma izmaiņas elementā ir ļoti "dārgi" procesi, un tās var būt vēl lielākas problēmas, ja elementam, kas iet caur izkārtojuma izmaiņām, ir ievērojams bērnu skaits (kopš Atspiež hierarhijas kaskādi).

Atsvaidzinājumus izraisa izkārtojuma izmaiņas elementā, piemēram, ģeometrisko īpašību izmaiņas, piemēram, augstums vai fonta lielums, klases pievienošana vai noņemšana, loga izmēru maiņa, aktivizēta : lidināties, DOM mainās, izmantojot JavaScript utt.

Tāpat kā stila aprēķinos, lai samazinātu atspīdumus, izvairīties no sarežģītiem selektoriem un dziļi DOM koki (atkal, tas ir, lai novērstu pārmērīgu Reflows pakāpi).

Ja lapā ir jāmaina sastāvdaļas izkārtojuma stili, atlasiet elementa stilus, kas ir zemākā elementu hierarhijā ka komponents ir izgatavots no. Tas ir tāds, ka izkārtojuma izmaiņas neizraisa (gandrīz) jebkuru citu atspīdumu.

Ja animējat elementu, kas iet caur izkārtojuma izmaiņām, izņemiet to no lapas plūsmas līdz to nenovēršami pozicionē, tā kā Reflow pilnīgi pozicionētos elementos neietekmēs pārējos lapas elementus.

Apkopojot:

• Mērķa elementi, kas ir zemāki DOM kokā, veicot izkārtojuma izmaiņas
• Izvēlieties absolūti novietotus elementus izkārtojuma maiņas animācijām
• Ja vien iespējams, izvairieties no izkārtojuma rekvizītu animācijas

3. Samaziniet Repaints

Pārkrāsošana attiecas uz pikseļu zīmēšanu uz ekrāna, un tas ir dārgs process, tāpat kā Reflow. Repainus var aktivizēt ar Reflows, lapas ritināšanu, īpašību izmaiņām, piemēram, krāsu, redzamību un necaurredzamību.

Lai izvairītos no biežiem un milzīgiem repainiem, izmantot mazāk īpašību, kas izraisa dārgas repaines kā ēnas.

Ja jūs animējat elementa īpašības, kas var tieši vai netieši izraisīt atkārtotu krāsu, tas būs ļoti izdevīgs ja šis elements ir savā slānī novēršot, ka tā krāsošana var ietekmēt pārējo lapu un aktivizēt aparatūras paātrinājumu. Aparatūras paātrināšanā GPU veiks uzdevumu veikt slāņa animācijas izmaiņas, ietaupot CPU papildu darbu, vienlaikus paātrinot procesu.

Dažās pārlūkprogrammās, dūmainība (ar vērtību, kas mazāka par. \ t 1) un pārveidot (vērtība, kas nav neviens nav) tiek automātiski reklamēti jaunos slāņos, un animācijām un pārejām tiek izmantots aparatūras paātrinājums. Šo īpašību izvēle animācijām ir tik laba.

Spēcīgi veicināt jaunu slāņa elementu un iedziļināties aparatūras paātrinājumā animācijai ir divas metodes:

1. pievienot transformēt: translate3d (0, 0, 0); elementam, pārlūkojot pārlūkprogrammu, lai aktivizētu aparatūras paātrinājumu animācijām un pārejām.
2. pievienojiet mainīšos īpašums elementam, kas informē pārlūkprogrammu par īpašībām, kas nākotnē varētu mainīties elementā. Piezīme: Sara Soueidan ir izstrādājusi padziļinātu un ļoti noderīgu rakstu par to Dev.Opera vietnē.

Apkopojot:

• Izvairieties no dārgiem stiliem, kas izraisa Repaints
• Meklējiet slāņa veicināšanas un aparatūras paātrinājumu, lai iegūtu dūšīgas animācijas un pārejas.

Ņemt vērā

(1) Līdz ar to tagad mēs neesam saskārušies ar CSS faila lieluma samazināšanu. Mēs esam minējuši, ka stila noteikumu (un DOM elementu) samazināšana būtiski uzlabo darbību cik daudz pārlūkprogrammai būs jāstrādā mazāk par stilu aprēķināšanas procesu. Šī koda samazinājuma rezultātā rakstot labākus selektorus un neizmantoto CSS dzēšanu, faila lielums automātiski samazinās.

(2) Tas ir arī ieteicams nepadara pārāk daudz secīgu izmaiņu elementa stilā JavaScript. Tā vietā jāpievieno klasei elementam (izmantojot JavaScript), kurā ir jauni stili, lai veiktu šīs izmaiņas - tas novērš nevajadzīgas atsākšanas.

(3) Jūs vēlaties izvairieties no izkārtojuma izkrišanas kā arī (piespiedu sinhronās atspīdumi), kas rodas, piekļūstot elementiem un to pārveidojot, izmantojot JavaScript. Uzziniet vairāk par to, kā šī darbība nogalina šeit.