Ako napísať lepší CSS s výkonom v mysli

V dnešnom príspevku budeme premýšľať nad možnosťami kódov, ktoré môžeme urobiť v CSS pre lepšiu výkonnosť stránok. Ale predtým, ako sa ponoríme do týchto možností, najskôr vykonáme krátky a bližší pohľad na pracovný postup vykresľovania webových stránok, aby sme sa sústredili naproblematické (výkonné) oblasti, ktoré sú riešiteľné prostredníctvom CSS.

Tu je hrubý tok operácií vykonaných prehliadačom po vytvorení stromu DOM:

Prepočítať štýl (a vytvorenie stromu renderovania). Prehliadač vypočíta štýly, ktoré sa majú použiť na prvky stromu DOM. Strom renderovania je neskôr vytvorený pri vyradení uzlov (prvkov) z stromu DOM, ktoré sa nemajú vykresľovať (prvky s display: none) a tie, ktoré sú (pseudo-elementy).
Rozloženie (aka Reflow). Pomocou predtým vypočítaného štýlu prehliadač vypočíta pozíciu a geometriu každého prvku na stránke.
premaľovať. Akonáhle je rozloženie mapované, sú pixely nakreslené na obrazovku.
Kompozitné vrstvy. Pri maľovaní sa maľba môže vykonávať samostatne v rôznych vrstvách; tieto vrstvy sa potom nakoniec spoja dohromady.

Teraz poďme pokračovať v tom, čo môžeme urobiť v prvých troch etapách operácie, aby sme napísali lepšie fungujúce kódy CSS.

1. Znížte výpočty štýlov

Ako sme už spomenuli, prehliadač v štádiu "Recalculate Style" vypočíta štýly, ktoré sa majú použiť na prvky. Ak to chcete urobiť, najprv prehliadač nájde všetky výbery v CSS, ktoré ukazujú na daný uzol prvkov v stromovom strome DOM. Potom prechádza všetkými pravidlami štýlu v týchto selektoroch a rozhoduje, ktoré z nich sa majú skutočne aplikovať na prvok.

Vyhnite sa drahým výpočtom štýlu, znížiť zložité a hlboko vnorené selektory takže je pre prehliadač jednoduchšie zistiť, na ktorý prvok sa volič odkazuje. Tým sa znižuje výpočtový čas.

Zahrnúť aj iné spôsoby zamestnania zníženie počtu pravidiel štýlu (kde je možné), odstránenie nepoužívaného CSS a vyhnúť sa redundancia a prepísanie, takže prehliadač nemusí počas výpočtov štýlov opakovane prechádzať rovnakým štýlom.

2. Znížte preformáty

Preformulovanie alebo zmena rozloženia v prvku sú veľmi "drahé" procesy a môžu mať ešte väčší problém, keď prvok, ktorý prešiel zmenou rozloženia má veľké množstvo detí (od Prepája kaskádu nad hierarchiou).

Preformáty sa spúšťajú zmenami rozloženia prvku, napríklad zmenami geometrických vlastností, ako je výška alebo veľkosť písma, pridanie alebo odstránenie tried na prvky, zmena veľkosti okna, aktivácia :vznášať sa, DOM zmeny JavaScript, atď.

Rovnako ako vo výpočte štýlu, aby sa znížil počet reflowov, vyhnite sa zložitým výberom a hlboké stromy DOM (znova, aby sa zabránilo nadmernému kaskádovaniu reflowov).

Ak musíte zmeniť štýly rozloženia komponentu vo vašej stránke, zacieliť štýly prvku, ktorý je na najnižšej v hierarchii prvkov že komponent je vyrobený z. Je to tak, že zmeny rozloženia nespúšťajú (takmer) žiadne ďalšie preformáty.

Ak animujete prvok, ktorý prechádza zmenami rozloženia, vytiahnite to z toku stránky podľa absuretely positioning it, pretože reflow v absolútne umiestnených prvkoch neovplyvní ostatné prvky na stránke.

Zhrnúť:

Cieľové prvky, ktoré sú nižšie v stromu DOM pri vykonávaní zmien rozloženia
Vyberte absolútne umiestnené prvky pre animácie s rozložením rozloženia
Ak je to možné, vyhnite sa animácii vlastností rozloženia

3. Znížte opotrebenie

Repaint sa vzťahuje na kresbu pixelov na obrazovke a je drahý proces rovnako ako Reflow. Oprava môže byť spustená pomocou reflowov, posúvania stránok, zmien vo vlastnostiach, ako je farba, viditeľnosť a nepriehľadnosť.

Aby ste sa vyhli častým a obrovským opravám, používajte menej vlastností, ktoré spôsobujú nákladné opravy ako tiene.

Ak animujete vlastnosti prvku, ktorý môže spustiť funkciu Repaint priamo alebo nepriamo, bude to veľká výhoda ak je tento prvok vo svojej vlastnej vrstve zabrániť tomu, aby jeho náterová predpoveď neovplyvnila zvyšok stránky a spustila hardvérovú akceleráciu. Pri akcelerácii hardvéru GPU prevezme úlohu vykonávania animačných zmien vo vrstve, čím uľahčí extra prácu procesora, pričom urýchli proces.

V niektorých prehliadačoch, nepriehľadnosť (s hodnotou menšou ako 1) a premeniť (iná hodnota ako nikto) sa automaticky propagujú do nových vrstiev a hardvérová akcelerácia sa aplikuje na animácie a prechody. Uprednostňovanie týchto vlastností pre animácie je teda dobré.

Nútene propagovať prvok do novej vrstvy a prejsť do hardvérovej akcelerácie pre animáciu existujú dve techniky, ktoré sa nazývajú:

pridať transformovať: translate3d (0, 0, 0); na prvok, ktorý prenechá prehliadač na spustenie hardvérovej akcelerácie pre animácie a prechody.
pridajte zmení sa vlastnosť prvku, ktorá informuje prehliadač o vlastnostiach, ktoré sa v budúcnosti pravdepodobne budú meniť. Poznámka: Sara Soueidan má na tomto mieste dôkladný a super užitočný článok v lokalite Dev.Opera.

Zhrnúť:

Vyhnite sa drahým štýlom, ktoré spôsobujú opravy
Vyhľadajte podporu vrstvy a hardvérovú akceleráciu pre náročné animácie a prechody.

Zaznamenať si

(1) Takže až teraz sme sa nedotkli zníženia veľkosti súboru CSS. Zmienili sme sa o tom, že zníženie pravidiel štýlu (a prvkov DOM) prináša značné zlepšenie výkonnosti z dôvodu koľko bude prehliadač fungovať menej o procese výpočtu štýlov. V dôsledku tohto zníženia kódu, písania lepších výberov a vymazania nevyužitých CSS, veľkosť súboru sa automaticky zníži.

(2) Je tiež vhodné nedá príliš veľa následných zmien štýlov prvkov v jazyku JavaScript. Namiesto toho pridajte do prvku (pomocou jazyka JavaScript) triedy, ktorá obsahuje nové štýly na vykonanie týchto zmien - zabraňuje to zbytočným premenám.

(3) Budete chcieť vyhýbajte sa rozvrhovaniu rozloženia (vynútené synchronné preformáty), ktoré vznikajú v dôsledku prístupu a úpravy vlastností prvkov Layout pomocou jazyka JavaScript. Prečítajte si viac informácií o tom, ako to znižuje výkonnosť tu.