Ydelsesovervågning i CSS-animationer


(Virendra Singh) (22. apr. 2020)

Animation ved hjælp af JavaScript ? eller Animation ved hjælp af CSS ?

Dette spørgsmål rammer hver udvikler en gang eller sandsynligvis to gange eller mere i deres tekniske karriere.

Over tid kom Javascript-nørder med mange biblioteker til at lave animation i browseren, og alle synes overbevist om at bruge disse biblioteker som en hyldeløsning. Men hæng på, er dette den rigtige løsning? Skal vi lave animation ved hjælp af JavaScript? Eller kan vi stole på indbygget CSS-implementering for at gøre animationer på en bedre og performant måde?

Da du læser denne blog, antager jeg, at du er fortrolig med JavaScript-animationer. Så lad os udforske “CSS-baseret animation” i detaljer og forskellige varianter af CSS-animation sammen med deres præstationsimplikationer.

Grundlaget for animation er afhængig af nogle CSS-egenskaber, som du ofte vil bruge i CSS-baseret animationstung implementeringer.

position: (absolut / relativ)

transform

opacitet

venstre, højre, top, bund og mange flere.

Lad os begynde med at se på resultaterne fra to eksperimenter med forskellige CSS-egenskaber til animation.

(a) absolut position med venstre og øverste

(b) transformer

Hvorfor forsøger vi desuden ikke at drage konklusioner om ydeevne og gengivelsestid baseret på disse eksperimenter?

Ved at se på disse to eksempler føles det ens funktionalitet har været imp mindsket på trods af, at man bruger forskellige tilgange. Men når vi måler præstationsmålingerne i chrome dev-tool, ser vi en faktisk forskel med hensyn til ydeevne i begge tilfælde.

Før vi dyber ned for at forstå disse præstationsmålinger, er vi nødt til at forstå, hvordan browseren gengiver brugergrænsefladen og alle de handlinger, den udfører, når en opdatering sker på brugergrænsefladen.

Så oprettelsen af ​​brugergrænsefladen starter med:

1) Beregn de typografier, der skal anvendes på elementerne (Genberegn stil)

2) Opret elementernes layout og placer dem på skærmen (Layout)

3) Tilføj pixels i alle oprettede layouts, det er mere at oprette bitmap for hvert lag. GPU bruger denne bitmap til at gengive laget på skærmen (Paint)

4) Til sidst skal du oprette lagene på skærmen og konstruere en stak med lag. Set ovenfra på denne stak vil se ud som en komplet webside, hvor hvert element har sin egen position (Composite Layers)

Oprettelse af Composite Layer er et sted, hvor CPU taler til GPU for at håndtere animationen. Ved hjælp af egenskaber som transformation og opacitet kan vi tvinge browseren til at lave animation ved hjælp af GPU i stedet for CPU.

Så hvordan hjælper GPU os med at udføre en jævn animation?

GPU er en anden lille maskine til at håndtere vores animation, og den kan håndtere et stort antal UI-beregninger.

Så når oprettelse af sammensat lag udløses, opretter det et andet lag. Dette er en anden måde at hjælpe os med at undgå at gengive elementet, der bliver animeret, og andre dele af UI-elementerne.

På billedet nedenfor ser begge røde kugler ud til at være på samme lag. Men når vi flytter dette lag i 3D-rotation, finder vi ud af, at Transform animation har et andet lag, der er oprettet til den røde kugle, hvilket giver jævn animation.

GPU holder dette gengivne objekttræ i hukommelsen og uden gengivelse igen , kan lægge dette lag oven på de andre. Men i tilfælde af animation øverst til venstre bliver det samme lag gengivet igen og igen på grund af ændringer i disse egenskaber. Hvis vi kontrollerer opførslen af ​​disse to CSS-egenskaber, ser vi, at begge egenskaberne venstre og top påvirke layoutet, hvilket også forårsager en maling og sammensat operation.

Oversæt vs Top / Venstre

Ovenstående animation af bolden har en klar forskel mellem oversæt vs top / venstre .

I tilfælde af top / venstre animation, bolden bliver gengivet på hver position, indtil den når den endelige destination, og når den begynder at bevæge sig til startpositionen igen, starter den gengivelsesdelen.

Bemærk: Den lilla farve repræsenterer skabelsen af ​​den røde kugle, og den grønne farve bruges til at arkivere pixels.

Begge billeder ovenfor er et screenshot af, hvordan oversætter udfører vs øverst / venstre .

Ved at fremhæve en enkelt opgave for hver enkelt, begynder vi at forstå at aktiviteten, der udføres af opgaven, er forskellig i begge tilfælde. I det øverste / venstre tilfælde udførte opgaven layoutoprettelse, maling og stilgenberegning. I tilfælde af oversættelse , en enkelt opgave udført af GPU flytter det sammensatte lag uden at gengive noget i DOM.

Så med GPU-strøm holder vi vores hovedtråd fri. Dette hjælper os med at øge applikationens ydeevne, og vores hovedtråd er optaget af rendering af layout.

Ovenstående metriske graf giver mere bevis, der forklarer det nøjagtige omfang, hvor vores hovedtråd er optaget i layout og stilgenberegning. Denne graf afspejler løbende de ændringer, der sker på brugergrænsefladen.

Skriv et svar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *