Hvordan man skriver bedre CSS med ydelse i tankerne

I dagens indlæg vil vi overveje de kodevalg, vi kan lave i CSS for forbedret webstedsydelse. Men før vi dykker ind i disse valg, lad os først tage et kort og nærmere kig på websiden, der giver arbejdsgennemstrømning for at fokusere påproblematiske (performance-wise) områder, der kan løses via CSS.

Her er den grove strøm af operationer udført af browseren efter oprettelse af DOM-træet:

1. Genberegn stil (og gør træ skabelse). Browser beregner de stilarter, der skal anvendes på elementerne i DOM-træet. Et render træ oprettes senere, mens nodene (elementer) fjernes fra DOM-træet, der ikke skal gengives (elementer med display: none) og dem der er (pseudo-elementer).
2. Layout (aka Reflow). Ved hjælp af den beregnede stil fra før beregner browseren placeringen og geometrien for hvert element på siden.
3. genfremstille. Når layoutet er kortlagt, trækkes pixels til skærmen.
4. Sammensatte lag. Under maling kan malingen udføres i forskellige lag selvstændigt; disse lag er så endelig kombineret sammen.

Lad os nu fortsætte med, hvad vi kan gøre i de første tre faser af operationen for at skrive bedre udførende CSS koder.

1. Reducer stilberegninger

Som nævnt før beregner browseren de stilarter, der skal anvendes på elementerne, i "Recalculate Style" -fasen. For at gøre dette finder browseren først alle selektorer i CSS'en, der peger på en given elementknude i DOM-træet. Så går det igennem alle stilreglerne i disse selektorer og bestemmer hvilke der rent faktisk skal anvendes på elementet.

For at undgå dyre stilberegninger, reducere komplekse og dybt indlejrede selektorer så det er nemmere for browseren at finde ud af, hvilket element en vælger henviser til. Dette reducerer beregningstiden.

Andre måder at ansætte omfatter reducerer antallet af stilregler (hvor det er muligt), fjernelse af ubrugt CSS og undgå redundans og overtræk, så browseren ikke behøver at gå gennem samme stil igen og igen under stilberegninger.

2. Reducer Reflows

Reflows eller Layout ændringer i et element er meget "dyre" processer, og de kan være et endnu større problem, når elementet, der gik gennem layoutændringer, har en betydelig mængde børn (siden Reflows kaskade ned hierarkiet).

Reflows udløses af layoutændringer i et element, f.eks. Ændringer i de geometriske egenskaber som højde- eller skriftstørrelse, tilføjelse eller fjernelse af klasser til elementer, ændring af vinduets størrelse, aktiveret : hover, DOM ændres ved hjælp af JavaScript osv.

Ligesom i stil beregning, for at reducere Reflows, undgå komplekse selektorer og dybe DOM træer (igen er dette for at forhindre overdreven cascading af Reflows).

Hvis du skal ændre layoutformaterne for en komponent på din side, mål stilene af elementet, der er lavest i elementernes hierarki at komponenten er lavet af. Dette er sådan, at layoutændringer ikke udløser (næsten) andre Reflows.

Hvis du animerer et element, der går gennem layoutændringer, tag det ud af sidestrømmen ved absoutely positionering det, da Reflow i absolut positionerede elementer ikke vil påvirke resten af ​​elementerne på siden.

At opsummere:

• Målelementer, der er lavere i DOM-træet, når layoutændringer ændres
• Vælg absolut positionerede elementer til layoutændrings animationer
• Undgå at animere layoutegenskaber, når det er muligt

3. Reducer Repaints

Gentagelse refererer til tegningen af ​​pixels på skærmen, og er en dyr proces ligesom Reflow. Repaints kan udløses af Reflows, side rulle, ændringer i egenskaber som farve, synlighed og opacitet.

For at undgå hyppige og store repaints, Brug mindre af de egenskaber, der forårsager dyre repaints som skygger.

Hvis du er animerende egenskaber af et element, der kan udløse Repaint direkte eller indirekte, vil det være til stor fordel hvis dette element er i sit eget lag forhindrer dets maleri prcoess i at påvirke resten af ​​siden og udløse hardware acceleration. Ved hardwareacceleration vil GPU'en tage sig af opgaven med at udføre animationsændringer i laget, hvilket sparer CPU'et ekstra arbejde, mens processen fremskyndes.

I nogle browsere, Gennemsigtighed (med en værdi mindre end 1) og omdanne (anden værdi end ingen) fremmes automatisk til nye lag, og hardware acceleration anvendes til animationer og overgange. Foretrukne disse egenskaber til animationer er således godt.

At tvinge fremme et element til nyt lag og gå i hardware acceleration til animation er der to teknikker invovled:

1. tilføje transformere: translate3d (0, 0, 0); til elementet og lure browseren til at udløse hardwareaccelerationen til animationer og overgange.
2. tilføj vil ændre sig ejendom til elementet, som informerer browseren om de egenskaber, der sandsynligvis vil ændre sig i elementet i fremtiden. Bemærk: Sara Soueidan har en dybtgående og super nyttig artikel om dette på Dev.Opera-webstedet.

At opsummere:

• Undgå dyre stilarter, der forårsager Repaints
• Søg lag fremme og hardware acceleration til kraftige animationer og overgange.

Tage til efterretning

(1) Så indtil nu har vi ikke rørt CSS filstørrelsesreduktion. Vi har nævnt, at reduktion i stilregler (og DOM-elementer) giver en væsentlig forbedring af ydeevnen på grund af hvor meget browseren skal arbejde mindre på processen med at beregne stilarterne. Som en konsekvens af denne kode reduktion, skriver bedre selektorer og sletning af ubrugt CSS, Filstørrelsen reduceres automatisk.

(2) Det er også tilrådeligt at ikke lave for mange konsekvensændringer i et elements stilarter i JavaScript. I stedet tilføj en klasse til elementet (ved hjælp af JavaScript), der indeholder de nye stilarter til at foretage disse ændringer - dette forhindrer unødvendig genflow.

(3) Du vil gerne undgå Layout Thrashing samt (tvunget synkroniske Reflows), der opstår som følge af adgang til og ændring af Layout egenskaber af elementer ved hjælp af JavaScript. Læs mere om hvordan dette dræber ydeevne her.