Hoe je betere CSS te schrijven met prestaties in het achterhoofd

In de post van vandaag zullen we nadenken over de codekeuzes die we in CSS kunnen maken voor verbeterde siteprestaties. Maar voordat we dieper ingaan op die keuzes, laten we eerst de werkstroom voor het renderen van de webpagina eens kort bekijken om ons te concentreren op deproblematische (prestatiegerichte) gebieden die oplosbaar zijn via CSS.

Dit is de ruwe stroom van bewerkingen die door de browser worden uitgevoerd na het maken van de DOM-structuur:

Herbereken stijl (en creëer de structuur van de render). Browser berekent de stijlen die moeten worden toegepast op de elementen in de DOM-structuur. Later wordt een renderboom gemaakt bij het verwijderen van de knooppunten (elementen) uit de DOM-structuur die niet moeten worden gerenderd (elementen met Geen weergeven) en die (pseudo-elementen).
Layout (ook bekend als Reflow). Met behulp van de vooraf berekende stijl berekent de browser de positie en geometrie van elk element op de pagina.
opnieuw schilderen. Nadat de lay-out is toegewezen, worden pixels naar het scherm getekend.
Samengestelde lagen. Tijdens het herschilderen kan de schildering autonoom in verschillende lagen worden uitgevoerd; die lagen worden dan uiteindelijk samen gecombineerd.

Laten we nu verder gaan met wat we kunnen doen in de eerste drie fasen van de bewerking om beter presterende CSS-codes te schrijven.

1. Verminder stijlberekeningen

Zoals eerder vermeld, berekent de browser in de fase "Herbereken stijl" de stijlen die op de elementen moeten worden toegepast. Hiertoe zoekt de browser eerst alle selectors in de CSS die naar een bepaald elementknooppunt in de DOM-structuur wijzen. Vervolgens doorloopt het alle stijlregels in die selectors en beslist welke moeten worden toegepast op het element.

Om kostbare stijlberekeningen te voorkomen, verminder complexe en diep geneste selecteurs zodat het voor de browser eenvoudiger is uit te vinden naar welk element een selector verwijst. Dit vermindert de computertijd.

Andere manieren om te gebruiken zijn onder andere vermindering van het aantal stijlregels (waar mogelijk), het verwijderen van ongebruikte CSS en vermijden overtolligheid en overschrijvingen, zodat de browser tijdens stijlberekeningen niet steeds dezelfde stijl hoeft te doorlopen.

2. Terugstromen verminderen

Reflows of Layout-wijzigingen in een element zijn zeer "dure" processen en kunnen een nog groter probleem vormen wanneer het element dat de lay-outveranderingen heeft doorgemaakt een aanzienlijk aantal kinderen heeft (sinds Terugvloeiing stroomt door de hiërarchie).

Terugvloeiingen worden geactiveerd door lay-outwijzigingen in een element, zoals wijzigingen in de geometrische eigenschappen zoals hoogte of lettergrootte, toevoeging of verwijdering van klassen aan elementen, venstergroottes aanpassen, geactiveerd : hover, DOM-wijzigingen door JavaScript, enzovoort.

Net als bij stijlberekening, om het aantal teruggaven te verminderen, vermijd complexe selectors en diepe DOM-bomen (nogmaals, dit is om overmatig trapsgewijs stromen van Reflows te voorkomen).

Als u de lay-outstijlen van een component op uw pagina moet wijzigen, target de stijlen van het element dat het laagst is in de hiërarchie van elementen waarvan de component is gemaakt. Dit is zodat de wijzigingen in de lay-out niet leiden tot (bijna) alle andere Reflows.

Als u een element animeert dat door lay-outwijzigingen gaat, haal het uit de paginastroom door onvoorstelbaar positionerend, omdat Reflow in absoluut gepositioneerde elementen geen invloed heeft op de rest van de elementen op de pagina.

Samenvatten:

Doelelementen die lager zijn in de DOM-structuur bij het maken van lay-outwijzigingen
Kies absoluut gepositioneerde elementen voor het wijzigen van animaties
Vermijd geanimeerde lay-outeigenschappen waar mogelijk

3. Repaints verminderen

Repaint verwijst naar het tekenen van pixels op het scherm en is een duur proces, net als Reflow. Repaints kunnen worden geactiveerd door middel van Reflows, pagina bladeren, wijzigingen in eigenschappen zoals kleur, zichtbaarheid en dekking.

Om frequente en grote overschilderingen te voorkomen, gebruik minder eigenschappen die dure repaints veroorzaken zoals schaduwen.

Als je eigenschappen animeert van een element dat Repaint direct of indirect kan activeren, zal het van groot voordeel zijn als dat element zich in zijn eigen laag bevindt het voorkomen dat het schilderij ongeschikt is, beïnvloedt de rest van de pagina en triggert hardwareversnelling. Bij hardwareversnelling neemt de GPU de taak op zich om de animatiewijzigingen in de laag uit te voeren, waardoor de CPU extra werk bespaart en het proces wordt versneld.

In sommige browsers, ondoorzichtigheid (met een waarde van minder dan 1) en transformeren (andere waarde dan geen) worden automatisch gepromoveerd naar nieuwe lagen en hardwareversnelling wordt toegepast voor animaties en overgangen. De voorkeur geven aan deze eigenschappen voor animaties is dus goed.

Te krachtig een element naar een nieuwe laag promoveren en hardwareversnelling inschakelen voor animatie worden er twee technieken gebruikt:

toevoegen transformatie: translate3d (0, 0, 0); naar het element, waardoor de browser wordt overgehaald om de hardwareversnelling voor animaties en overgangen te activeren.
voeg het toe zal veranderen eigenschap aan het element, die de browser op de hoogte stelt van de eigenschappen die in de toekomst waarschijnlijk in het element zullen veranderen. Notitie: Sara Soueidan heeft hierover een diepgaand en supervriendelijk artikel in de Dev.Opera-site.

Samenvatten:

Vermijd dure stijlen die Repaints veroorzaken
Zoek naar laagpromotie en hardwareversnelling voor flinke animaties en overgangen.

Maak een notitie

(1) Tot nu toe hebben we de beperking van de CSS-bestandsgrootte niet aangeroerd. We hebben vermeld dat vermindering van stijlregels (en DOM-elementen) een aanzienlijke prestatieverbetering veroorzaakt vanwege hoeveel de browser zal moeten werken minder over het proces van het berekenen van de stijlen. Als gevolg van deze codevermindering, het schrijven van betere selectors en het verwijderen van ongebruikte CSS, de bestandsgrootte neemt automatisch af.

(2) Het is ook raadzaam om maak niet te veel consequente wijzigingen aan de stijlen van een element in JavaScript. Voeg in plaats daarvan een klasse toe aan het element (met behulp van JavaScript) dat de nieuwe stijlen bevat om deze wijzigingen aan te brengen - dit voorkomt onnodige terugvloeiing.

(3) U zult willen vermijd lay-out geselen ook (geforceerde synchrone reflows) die ontstaat als gevolg van het openen en wijzigen van de lay-outeigenschappen van elementen met behulp van JavaScript. Lees meer over hoe dit de prestaties hier doodt.