Како написати боље ЦСС са перформансама у уму

У данашњем посту ћемо размотрити избор кодова које можемо направити у ЦСС-у за побољшање перформанси сајта. Али, пре него што уђемо у те изборе, хајде да прво направимо кратак, ближи поглед на веб страницу која приказује радни ток како би се фокусирали напроблематичне области које се могу решити преко ЦСС-а.

Ево грубог тока операција које извршава претраживач након креирања ДОМ стабла:

Поново израчунај стил (и креирај стабло). Претраживач израчунава стилове који се примењују на елементе у ДОМ стаблу. Дрво рендер-а се касније креира док одбацује чворове (елементе) из ДОМ стабла који се не приказују (елементи са дисплаи: ноне) и оне које су (псеудо-елементи).
Лаиоут (ака Рефлов). Користећи израчунати стил од раније, претраживач израчунава позицију и геометрију сваког елемента на страници.
Репаинт. Када се мапирање мапира, пиксели се привлаче на екран.
Сложени слојеви. Приликом поновног бојења, сликање се може обавити у различитим слојевима самостално; ти слојеви се коначно спајају заједно.

Сада наставимо са оним што можемо да урадимо у прве три фазе операције за писање ЦСС кодова са бољим перформансама.

1. Редуце Стиле Цалцулатионс

Као што је већ споменуто, у фази "Поновно израчунај стил" претраживач израчунава стилове који ће се примијенити на елементе. Да би то урадили, претраживач први пут проналази све селекторе у ЦСС-у који указују на дати чвор елемента у ДОМ стаблу. Затим пролази кроз сва стила правила у тим селекторима и одлучује које ће се заправо примијенити на елемент.

Да бисте избегли скупе прорачуне стила, смањити сложене и дубоко уклопљене селекторе тако да је прегледнику лакше да схвати на који елемент селектор мисли. Ово смањује време рачунања.

Други начини запошљавања укључују смањење броја правила за стил (гдје је то могуће), уклањање неискоришћеног ЦСС-а и избегавање редундантност и надјачавања, тако да претраживач не мора да пролази кроз исти стил поново и поново током стила калкулација.

2. Редуце Рефловс

Промене рефлова или Лаиоут-а у елементу су веома "скупи" процеси, и могу бити још већи проблем када елемент који је прошао кроз промене изгледа има значајну количину деце (јер Рефлов каскаде низ хијерархију).

Рефлов се активира промјенама распореда у елементу, као што су промјене геометријских својстава као што су висина или величина фонта, додавање или уклањање класа до елемената, промјена величине прозора, активирање :лебдети, ДОМ мијења ЈаваСцрипт, итд.

Баш као у стилу калкулације, да се смањи Рефловс, избегавајте сложене селекторе и дееп ДОМ треес (опет, то је да би се спречило прекомерно каскадирање повратних података).

Ако морате да промените стилове распореда компоненте на вашој страници, циљајте стилове елемента који је најнижи у хијерархији елемената од које је компонента направљена. Ово је тако да промене изгледа не покрећу (скоро) било које друге Рефлов-е.

Ако анимирате елемент који пролази кроз измене изгледа, извадите из тока странице од стране апсурдно позиционирање, пошто Рефлов у апсолутно позиционираним елементима неће утицати на остале елементе на страници.

Да резимирам:

Циљани елементи који су нижи у ДОМ стаблу приликом прављења измена изгледа
Изаберите апсолутно позициониране елементе за анимацију промене изгледа
Избегавајте анимирање својстава изгледа кад год је то могуће

3. Редуце Репаинтс

Репаинт се односи на цртање пиксела на екрану и представља скуп процес као Рефлов. Репаинтс се могу активирати Рефловс, померањем странице, промјенама својстава као што су боја, видљивост и непрозирност.

Да би се избегла честа и велика понављања, користе мање својстава која узрокују скупе обнове лике схадовс.

Ако анимирате својства елемента који могу директно или индиректно покренути Репаинт, то ће бити од велике предности ако је тај елемент у свом слоју спречавање његовог сликања да утиче на остатак странице и покреће хардверско убрзање. У убрзању хардвера, ГПУ ће преузети задатак извршавања промена анимације у слоју, чувајући додатни рад процесора док убрзава процес.

У неким прегледачима, непрозирност (са вредношћу мањом од 1) и трансформисати (вредност која није ниједан) аутоматски се промовишу у нове слојеве, а хардверско убрзање се примењује за анимације и прелазе. Преферирање ових својстава за анимације је стога добро.

На силу промовисати елемент у нови слој и прећи у хардверско убрзање за анимацију постоје две технике:

додати трансформ: транслате3д (0, 0, 0); на елемент, преваром претраживача да покрене хардверско убрзање за анимације и прелазе.
Додајте ће се променити на елемент који информише претраживач о својствима која ће се вероватно променити у елементу у будућности. Белешка: Сара Соуеидан има детаљан и изузетно користан чланак о томе на Дев.Опера сајту.

Да резимирам:

Избегавајте скупе стилове који узрокују Репаинтс
Тражите промовисање слоја и хардверско убрзање за велике анимације и прелазе.

Узети на знање

(1) До сада, нисмо се дотакли смањења величине ЦСС датотеке. Споменули смо да смањење правила стила (и ДОМ елемената) значајно побољшава перформансе због колико ће претраживач морати да ради мање о процесу рачунања стилова. Као посљедица овог смањења кода, писање бољих селектора и брисање неискориштеног ЦСС-а, величина датотеке ће се аутоматски смањити.

(2) Такође је пожељно не правите превише последичних промена у стиловима елемента у ЈаваСцрипту. Уместо тога додајте класу елементу (користећи ЈаваСцрипт) који држи нове стилове да бисте извршили ове промене - то спречава непотребне обнављања.

(3) Ви ћете жељети избегавајте Лаиоут Тхрасхинг такође (присилни синхрони рефлов) који настаје услед приступа и модификовања Лаиоут својстава елемената користећи ЈаваСцрипт. Прочитајте више о томе како ово убија перформансе овде.