Prestatiebewaking in CSS-animaties

(Virendra Singh) (22 april 2020)

Animatie met JavaScript ? of Animatie met CSS ?

Deze vraag treft elke ontwikkelaar een keer, of waarschijnlijk twee keer of meer, in zijn technische carrière.

Na verloop van tijd kwamen Javascript-geeks met veel bibliotheken om animatie in de browser te maken, en iedereen lijkt overtuigd om deze bibliotheken als de kant-en-klare oplossing te gebruiken. Maar wacht even, is dit de juiste oplossing? Moeten we animaties maken met JavaScript? Of kunnen we vertrouwen op native CSS-implementatie om animaties op een betere en performantere manier te maken?

Aangezien u deze blog leest, ga ik ervan uit dat u bekend bent met JavaScript-animaties. Laten we daarom “CSS-gebaseerde animatie” in detail bekijken en verschillende smaken van CSS-animatie bekijken, samen met hun gevolgen voor de prestaties.

De basis van animatie is afhankelijk van enkele CSS-eigenschappen die u vaak zult gebruiken in op CSS gebaseerde animaties. implementaties.

positie: (absoluut / relatief)

transformeren

ondoorzichtigheid

links, rechts, boven, onder en veel meer.

Laten we beginnen met het bekijken van de resultaten van twee experimenten met verschillende CSS-eigenschappen voor animatie.

(a) positie absoluut met links en boven

(b) transform

Waarom proberen we bovendien op basis van deze experimenten geen conclusies te trekken over prestaties en weergavetijd?

Door naar deze twee voorbeelden te kijken, voelt het alsof functionaliteit is imp lemented ondanks het gebruik van verschillende benaderingen. Wanneer we echter de prestatiestatistieken meten in de Chrome dev-tool, zien we een werkelijk verschil in prestaties in beide gevallen.

Voordat we diepgaand gaan duiken om deze prestatiestatistieken te begrijpen, moeten we begrijpen hoe de browser geeft de gebruikersinterface weer en alle acties die het uitvoert wanneer er een update plaatsvindt op de gebruikersinterface.

Dus het maken van de gebruikersinterface begint met:

1) Bereken de stijlen die van toepassing zullen zijn op de elementen (Herbereken stijl)

2) Creëer de lay-out van de elementen en plaats ze op het scherm (Layout)

3) Voeg de pixels toe aan alle gemaakte lay-outs, het is meer een bitmap maken voor elke laag. GPU gebruikt deze bitmap om de laag op het scherm weer te geven (Paint).

4) Maak ten slotte de lagen op het scherm en construeer een stapel lagen. Het bovenaanzicht van deze stapel ziet eruit als een complete webpagina waarin elk element zijn eigen positie heeft (samengestelde lagen)

Het maken van samengestelde lagen is een plaats waar de CPU met de GPU praat om de animatie. Met behulp van eigenschappen zoals transformatie en ondoorzichtigheid, kunnen we de browser dwingen animaties te maken met GPU in plaats van CPU.

Dus hoe helpt GPU ons om een ​​vloeiende animatie uit te voeren?

GPU is een andere kleine machine om onze animatie te verwerken en het kan een groot aantal UI-berekeningen aan.

Dus wanneer het maken van samengestelde lagen wordt geactiveerd, wordt er een andere laag gemaakt. Dit is een andere manier om ons te helpen voorkomen dat het element dat wordt geanimeerd en andere delen van de UI-elementen opnieuw wordt gerenderd.

In de onderstaande afbeelding lijken beide rode ballen op dezelfde laag te zitten. Maar als we deze laag in 3D-rotatie verplaatsen, zien we dat de Transformeren animatie heeft een andere laag die is gemaakt voor de rode bal, wat zorgt voor vloeiende animaties.

GPU houdt deze renderobjectboom in het geheugen en, zonder opnieuw te renderen , kan deze laag over de andere heen leggen. Maar in het geval van animatie linksboven, wordt dezelfde laag keer op keer gerenderd vanwege veranderingen in deze eigenschappen. Als we het gedrag van deze twee CSS-eigenschappen controleren, zullen we zien dat beide eigenschappen links en top invloed hebben op de lay-out, waardoor ook een herschildering en composietbewerking wordt veroorzaakt.

Vertalen vs Top / Links

De bovenstaande animatie van de bal heeft een duidelijk verschil tussen translate vs top / left .

In het geval van top / left animatie, wordt de bal weergegeven op elke positie totdat hij de eindbestemming bereikt en, wanneer hij weer naar de beginpositie begint te bewegen, begint hij met het renderen.

Opmerking: de paarse kleur staat voor het maken van de lay-out van de rode bal en de groene kleur wordt gebruikt om de pixels op te slaan.

Beide afbeeldingen hierboven zijn een screenshot van hoe vertalen presteert versus top / left .

Door een enkele taak van elke taak te markeren, beginnen we te begrijpen dat de activiteit die door de taak wordt uitgevoerd in beide gevallen anders is. In het bovenste / linkse geval voerde de taak het maken van lay-outs, schilderen en herberekenen van stijlen uit. In het geval van translate , een enkele taak uitgevoerd door de GPU verplaatst de samengestelde laag zonder iets in DOM weer te geven.

Dus met GPU-vermogen houden we onze hoofddraad vrij. Dit helpt ons de prestaties van applicaties te verbeteren en onze belangrijkste thread is de drukke weergave-indeling.

De bovenstaande prestatiegrafiek geeft meer bewijs en legt uit in hoeverre onze hoofdthread bezig is met het herberekenen van lay-out en stijl. Deze grafiek geeft continu de veranderingen weer die plaatsvinden in de gebruikersinterface.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *