Cum de a scrie mai bine CSS cu performanță în minte

În postarea de astăzi vom discuta despre alegerile de cod pe care le putem face în CSS pentru o performanță îmbunătățită a site-ului. Dar, înainte de a se arunca cu capul în aceste opțiuni, să luăm mai întâi o privire scurtă și mai atentă asupra fluxului de lucru al paginii web, pentru a ne concentra asuprazone problematice (de performanță) care sunt rezolvate prin intermediul CSS.

Iată fluxul brut de operații efectuate de browser după crearea arborelui DOM:

1. Recalculați stilul (și creați arborele de randare). Browserul calculează stilurile care trebuie aplicate elementelor din arborele DOM. Un arbore de redare este creat mai târziu în timp ce aruncați nodurile (elementele) din arborele DOM, care nu trebuie redate (elementele cu display: none) și cele care sunt (pseudo-elemente).
2. Layout (aka Reflow). Utilizând stilul calculat anterior, browserul calculează poziția și geometria fiecărui element din pagină.
3. Vopsi din nou. Odată ce harta este dimensionată, pixelii sunt desenate pe ecran.
4. Straturi compozite. În timpul revopsării, pictura ar putea fi făcută în diferite straturi în mod autonom; aceste straturi sunt apoi combinate în final.

Acum, să continuăm cu ceea ce putem face în primele trei etape ale operațiunii pentru a scrie coduri CSS mai performante.

1. Reducerea calculelor de stil

După cum am menționat anterior, în stadiul "Recalculați stilul" browserul calculează stilurile care trebuie aplicate elementelor. Pentru a face acest lucru, browser-ul afișează mai întâi toate selectorii din CSS care indică un nod de elemente dat în arborele DOM. Apoi trece prin toate regulile de stil din acești selectori și decide care dintre ele urmează să fie efectiv aplicate elementului.

Pentru a evita calculele de stil costisitoare, reduceți selectorii complexe și adânc imbricate astfel încât browser-ul să fie mai ușor să dau seama la ce element se referă un selector. Aceasta reduce timpul de calcul.

Alte modalități de angajare includ reducerea numărului de reguli de stil (acolo unde este posibil), eliminarea CSS neutilizate și evitarea redundanță și suprascriere, astfel încât browserul nu trebuie să treacă prin același stil din nou și din nou în timpul calculelor de stil.

2. Reduceți refolosirea

Modificările de reflow sau layout într-un element sunt procese foarte "scumpe" și pot avea o problemă și mai mare atunci când elementul care a trecut prin modificările layout-ului are o cantitate semnificativă de copii (de la Returnează cascada în jos pe ierarhie).

Reflowurile sunt declanșate de modificările layout-ului unui element, cum ar fi modificările proprietăților geometrice, cum ar fi înălțimea sau dimensiunea fontului, adăugarea sau eliminarea clasei în elemente, redimensionarea ferestrelor, activarea :planare, Modificările DOM prin JavaScript, etc.

La fel ca în calculul stilului, pentru a reduce reflowurile, evitați selectorii complexe și arbori DOM adânci (din nou, acest lucru este de a preveni cascadarea excesivă a reflow-urilor).

Dacă trebuie să modificați stilurile de aspect ale unei componente în pagină, vizați stilurile elementului care este la cel mai mic din ierarhia elementelor că componenta este fabricată din. Acest lucru este în așa fel încât modificările layout-ului să nu declanșeze (aproape) niciun alt reflow.

Dacă animați un element care trece prin modificări de aspect, scoateți-l din fluxul paginii de poziționându-l absoluți, deoarece reflowul în elementele absolut poziționate nu va afecta restul elementelor de pe pagină.

A sumariza:

• Elementele țintă care sunt mai mici în arborele DOM atunci când se efectuează modificări ale aspectului
• Alege elemente absolut poziționate pentru animațiile care schimbă aspectul
• Evitați animarea proprietăților aspectului ori de câte ori este posibil

3. Reduce reparațiile

Refacerea se referă la desenul pixelilor de pe ecran și este un proces costisitor, la fel ca și Reflow. Repetările pot fi declanșate prin reflexe, derularea paginilor, modificări în proprietăți precum culoarea, vizibilitatea și opacitatea.

Pentru a evita repetările frecvente și uriașe, utilizați mai puține proprietăți care provoacă reparații costisitoare cum ar fi umbrele.

Dacă animați proprietățile unui element care poate declanșa Repaint direct sau indirect, va fi de mare avantaj dacă acel element este în stratul său propriu împiedicând pictogramele sale să afecteze restul paginii și să declanșeze accelerarea hardware. În accelerarea hardware, GPU-ul va prelua sarcina de a efectua modificările de animație ale stratului, salvând munca suplimentară a procesorului în timp ce accelerează procesul.

În unele browsere, opacitate (cu o valoare mai mică de 1) și transforma (valoare diferită de nici unul) sunt promovate automat în straturi noi, iar accelerația hardware este aplicată pentru animații și tranziții. Preferând aceste proprietăți pentru animații este, așadar, bună.

Pentru a forța promovați un element în noul strat și mergeți în accelerare hardware pentru animație, există două tehnici invocate:

1. adăuga transform: translate3d (0, 0, 0); la element, înșelând browserul în declanșarea accelerației hardware pentru animații și tranziții.
2. adaugă se va schimba proprietatea asupra elementului, care informează browserul cu privire la proprietățile care ar putea să se schimbe în viitor în element. Notă: Sara Soueidan are un articol aprofundat și foarte util despre acest lucru pe site-ul Dev.Opera.

A sumariza:

• Evitați stilurile scumpe care provoacă reparații
• Căutați promovarea stratului și accelerarea hardware pentru animații și tranziții grele.

Ia-ti notite

(1) Deci, până acum, nu am atins reducerea dimensiunii fișierului CSS. Am menționat că reducerea normelor de stil (și a elementelor DOM) face o îmbunătățire semnificativă a performanței din cauza cât va trebui să lucreze browserul Mai puțin cu privire la procesul de calcul al stilurilor. Ca o consecință a acestei reduceri a codului, scrierea selectorilor mai buni și ștergerea CSS neutilizate, dimensiunea fișierului va scădea automat.

(2) De asemenea, este recomandabil să nu face prea multe modificări aduse stilurilor unui element în JavaScript. În schimb, adăugați o clasă elementului (utilizând JavaScript) care deține stilurile noi pentru a face aceste modificări - acest lucru împiedică reflexele inutile.

(3) Veți dori să evitați Thrashing Layout (reflexe sincrone forțate) care apar datorită accesării și modificării proprietăților Layout-ului elementelor utilizând JavaScript. Aflați mai multe despre modul în care aceasta omoară performanța aici.