Ytelsesovervåking i CSS-animasjoner


(Virendra Singh) (22. apr. 2020)

Animasjon ved hjelp av JavaScript ? eller Animasjon ved hjelp av CSS ?

Dette spørsmålet treffer hver utvikler en gang, eller sannsynligvis to eller flere ganger, i sin tekniske karriere.

Over tid kom Javascript-geeks med mange biblioteker for å gjøre animasjon i nettleseren, og alle virker overbevist om å bruke disse bibliotekene som en hyllevare. Men vent på, er dette den riktige løsningen? Bør vi gjøre animasjon ved hjelp av JavaScript? Eller kan vi stole på integrert CSS-implementering for å gjøre animasjoner på en bedre og mer effektiv måte?

Siden du leser denne bloggen, antar jeg at du er kjent med JavaScript-animasjoner. Så la oss utforske «CSS-basert animasjon» i detalj og forskjellige smaker av CSS-animasjon sammen med deres ytelsesimplikasjoner.

Grunnlaget for animasjon er avhengig av noen CSS-egenskaper som du ofte vil bruke i CSS-basert animasjonstung implementeringer.

posisjon: (absolutt / relativt)

transform

opacity

left, right, top, bottom and mange flere.

La oss begynne med å se på resultatene fra to eksperimenter med forskjellige CSS-egenskaper for animasjon.

(a) posisjon absolutt med venstre og øverste

(b) transform

I tillegg, hvorfor prøver vi ikke å trekke konklusjoner om ytelse og gjengivelsestid basert på disse eksperimentene?

Ved å se på disse to eksemplene, føles det like funksjonalitet har vært imp lementert til tross for at du bruker forskjellige tilnærminger. Men når vi måler ytelsesberegningene i kromutviklingsverktøyet, ser vi en faktisk forskjell når det gjelder ytelse for begge tilfeller.

Før vi dykker for å forstå disse ytelsesberegningene, må vi forstå hvordan nettleseren gjengir brukergrensesnitt og alle handlingene den utfører når en oppdatering skjer på brukergrensesnittet.

Så oppretting av brukergrensesnittet starter med:

1) Beregn stilene som skal gjelde for elementene (Beregne stil på nytt)

2) Lag oppsettet til elementene og plasser dem på skjermen (Layout)

3) Legg til pikslene i alle opprettede layouter, det er mer å lage bitmap for hvert lag. GPU bruker denne bitmappen til å gjengi laget på skjermen (Paint)

4) Til slutt lager du lagene på skjermen og konstruerer en lagstabel. Oversikten fra denne stabelen vil se ut som en komplett webside der hvert element har sin egen posisjon (Composite Layers)

Composite Layer creation er et sted der CPU snakker med GPU, for å håndtere animasjonen. Ved å bruke egenskaper som transform og opacity, kan vi tvinge nettleseren til å gjøre animasjon ved hjelp av GPU i stedet for CPU.

Så hvordan hjelper GPU oss med å utføre en jevn animasjon?

GPU er en annen liten maskin for å håndtere animasjonen vår, og den kan håndtere et stort antall UI-beregninger.

Så når oppretting av sammensatt lag utløser, skaper det et nytt lag. Dette er en annen måte å hjelpe oss med å unngå å gjengi elementet som blir animert og andre deler av brukergrensesnittelementene.

På bildet nedenfor ser begge røde ballene ut til å være på samme lag. Men når vi flytter dette laget i 3D-rotasjon, finner vi at Transform animasjon har et annet lag som er opprettet for den røde ballen, og gir jevn animasjon.

GPU holder dette gjengivende objekttreet i minnet og uten å gjengi igjen , kan legge dette laget på toppen av de andre. Men når det gjelder animasjon øverst til venstre, blir det samme laget gjengitt igjen og igjen på grunn av endringer i disse egenskapene. Hvis vi sjekker oppførselen til disse to CSS-egenskapene, vil vi se at begge egenskapene venstre og topp påvirke oppsettet, og forårsaker også en maling og sammensatt operasjon.

Oversett vs Topp / Venstre

Animasjonen over ballen har en klar forskjell mellom oversett vs topp / venstre .

Når det gjelder topp / venstre animasjon, ballen blir gjengitt på hver posisjon til den når den endelige destinasjonen, og når den begynner å bevege seg til utgangsposisjonen igjen, starter den gjengivelsesdelen.

Merk: Den lilla fargen representerer utformingen av den røde kulen, og den grønne fargen brukes til å arkivere pikslene.

Begge bildene ovenfor er et skjermbilde av hvordan oversetter mot øverst / venstre .

Ved å markere en enkelt oppgave for hver enkelt, begynner vi å forstå at aktiviteten utført av oppgaven er forskjellig i begge tilfeller. I øverste / venstre tilfelle utførte oppgaven layoutoppretting, maling og stilberegning. Når det gjelder oversett , en enkelt oppgave utført av GPU flytter det sammensatte laget uten å gjengi noe i DOM.

Så med GPU-kraft holder vi hovedtråden vår fri. Dette hjelper oss med å øke applikasjonsytelsen og hovedtråden vår er opptatt med gjengivelse av layout.

Metrikgrafen over ytelse gir mer bevis, og forklarer nøyaktig hvor hovedtråden vår er opptatt i layout og stilberegning. Denne grafen gjenspeiler kontinuerlig endringene som skjer på brukergrensesnittet.

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket med *