Prestandaövervakning i CSS-animationer

Publicerad

(Virendra Singh) (22 apr 2020)

Animering med JavaScript ? eller Animering med CSS ?

Den här frågan träffar varje utvecklare en gång, eller förmodligen två gånger eller mer, i sin tekniska karriär.

Med tiden kom Javascript-geeks med många bibliotek för att göra animering i webbläsaren och alla verkar övertygad om att använda dessa bibliotek som hushållslösning. Men, vänta, är det här den rätta lösningen? Ska vi göra animering med JavaScript? Eller kan vi lita på inbyggd CSS-implementering för att göra animationer på ett bättre och mer performant sätt?

Eftersom du läser den här bloggen antar jag att du känner till JavaScript-animationer. Så låt oss utforska “CSS-baserad animering” i detalj och olika smaker av CSS-animering tillsammans med deras prestandakonsekvenser.

Grunden för animering är beroende av vissa CSS-egenskaper som du ofta kommer att använda i CSS-baserad animation tung implementeringar.

position: (absolute / relative)

transform

opacity

left, right, top, bottom and många fler.

Låt oss börja med att titta på resultaten från två experiment med olika CSS-egenskaper för animering.

(a) absolut position med vänster och övre

(b) omvandla

Dessutom, varför försöker vi inte dra slutsatser om prestanda och återgivningstid baserat på dessa experiment?

Genom att titta på dessa två exempel känns det som funktionalitet har varit imp trots olika metoder. Men när vi mäter prestandamätvärdena i Chrome-utvecklingsverktyget, ser vi en faktisk skillnad när det gäller prestanda för båda fallen.

Innan vi djupdykar för att förstå dessa prestandamått måste vi förstå hur webbläsaren gör användargränssnittet och alla de åtgärder som det utförs när någon uppdatering sker på användargränssnittet.

Så skapandet av gränssnittet börjar med:

1) Beräkna de stilar som ska tillämpas på elementen (Beräkna Style)

2) Skapa elementens layout och placera dem på skärmen (Layout)

3) Lägg till pixlarna i alla skapade layouter, det är mer att skapa bitmapp för varje lager. GPU använder denna bitmapp för att återge lagret på skärmen (Paint)

4) Slutligen skapar du lagren på skärmen och konstruerar en stapel lager. Ovanifrån av denna stack kommer att se ut som en komplett webbsida där varje element har sin egen position (Composite Layers)

Composite Layer-skapande är en plats där CPU pratar med GPU, för att hantera animationen. Med hjälp av egenskaper som transform och opacitet, kan vi tvinga webbläsaren att göra animering med GPU istället för CPU.

Så hur hjälper GPU oss att göra en smidig animering?

GPU är en annan liten maskin för att hantera vår animering och den kan hantera ett stort antal UI-beräkningar.

Så när skapandet av kompositlager utlöses skapar det ett nytt lager. Detta är ett annat sätt att hjälpa oss att undvika att återge elementet som blir animerat och andra delar av UI-elementen.

På bilden nedan ser båda röda kulorna ut på samma lager. Men när vi flyttar det här lagret i 3D-rotation finner vi att Transform animering har ett annat lager som har skapats för den röda bollen, vilket ger smidig animering.

GPU håller detta renderade objektträd i minnet och utan att rendera igen , kan lägga detta lager ovanpå de andra. Men i fallet med animering längst upp till vänster återges samma lager om och om igen på grund av förändringar i dessa egenskaper. Om vi ​​kontrollerar beteendet för dessa två CSS-egenskaper ser vi att båda egenskaperna kvar och topp påverkar layouten, vilket också orsakar en ommålning och sammansatt operation.

Översätt vs Topp / Vänster

Ovanstående animering av bollen har en tydlig skillnad mellan översätt mot övre / vänster .

När det gäller topp / vänster animering, bollen görs på varje position tills den når den slutliga destinationen och när den börjar flytta till utgångsläget igen, startar den återgivningsdelen.

Obs: Den lila färgen representerar den röda kulans layout och den gröna färgen används för att arkivera pixlarna.

Båda bilderna ovan är en skärmdump av hur översätter utför mot uppe / vänster .

Genom att markera en enda uppgift för var och en, börjar vi förstå att aktiviteten som utförs av uppgiften skiljer sig åt i båda fallen. I det övre / vänstra fallet utförde uppgiften layoutskapande, målning och stilberäkning. Vid översättningen , en enda uppgift utförd av GPU flyttar kompositlagret utan att göra något i DOM.

Så med GPU-kraft håller vi vår huvudtråd fri. Detta hjälper oss att förbättra applikationsprestandan och vår huvudtråd är upptagen med rendering av layout.

Ovanstående metriska diagram ger mer bevis, vilket förklarar den exakta omfattningen som vår huvudtråd är upptagen i layout och stilberäkning. Denna graf återspeglar kontinuerligt de förändringar som sker på användargränssnittet.

Lämna ett svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *