Suorituskyvyn valvonta CSS-animaatioissa


(Virendra Singh) (22. huhtikuuta 2020)

Animaatio JavaScriptin avulla ? tai CSS: ää käyttävä animaatio ?

Tämä kysymys osuu jokaiseen kehittäjään kerran tai todennäköisesti kahdesti tai enemmän teknisen uransa aikana.

Ajan myötä Javascript-geeksit keksivät paljon kirjastoja animaatioon selaimessa, ja kaikki näyttää olevan vakuuttunut siitä, että näitä kirjastoja käytetään valmiina ratkaisuna. Mutta odota, onko tämä oikea ratkaisu? Pitäisikö meidän tehdä animaatiota JavaScriptin avulla? Vai voimmeko luottaa alkuperäiseen CSS-toteutukseen animaation tekemiseen paremmin ja suorituskykyisemmin?

Koska luet tätä blogia, oletan, että olet perehtynyt JavaScript-animaatioihin. Tutkitaan siis ”CSS-pohjaista animaatiota” yksityiskohtaisesti ja CSS-animaation eri makuja sekä niiden suorituskykyyn liittyviä vaikutuksia.

Animaation perusta perustuu joihinkin CSS-ominaisuuksiin, joita käytät usein CSS-pohjaisessa animaatiossa toteutukset.

sijainti: (absoluuttinen / suhteellinen)

muunna

peittävyys

vasen, oikea, ylhäältä, alhaalta ja paljon muuta.

Aloitetaan tarkastelemalla kahden kokeilun tuloksia, joissa on erilaiset CSS-ominaisuudet animaatioon.

(a) absoluuttinen sijainti vasemmalla ja ylhäällä

(b) muunna

Miksi emme myöskään yritä tehdä johtopäätöksiä suorituskyvystä ja renderointiajasta näiden kokeiden perusteella?

Katsomalla näitä kahta esimerkkiä tuntuu, että samanlainen toiminnallisuus on ollut imp erilainen lähestymistapa. Kuitenkin, kun mitataan suorituskykymittareita kromi dev-työkalussa, havaitaan todellinen ero suorituskyvyssä molemmissa tapauksissa.

Ennen kuin syvennämme näiden suorituskykymittareiden ymmärtämistä, meidän on ymmärrettävä, miten selain renderöi käyttöliittymän ja kaikki sen suorittamat toiminnot, kun käyttöliittymässä tapahtuu päivityksiä.

Joten käyttöliittymän luominen alkaa:

1) Laske tyylit, joita elementteihin sovelletaan (Laske tyyli uudelleen)

2) Luo elementtien asettelu ja sijoita ne ruudulle (Asettelu)

3) Lisää pikselit kaikkiin luotuihin asetteluihin, se on enemmän bittikartan luomista jokaiselle tasolle. GPU käyttää tätä bittikarttaa renderöimään kerroksen näytöllä (maali)

4) Luo lopuksi kerrokset näytölle rakentamalla pino kerroksia. Tämän pinon ylänäkymä näyttää täydelliseltä verkkosivulta, jossa jokaisella elementillä on oma asemansa (komposiittikerrokset).

Komposiittikerroksen luominen on paikka, jossa CPU puhuu GPU: n kanssa. animaatio. Käyttämällä ominaisuuksia, kuten muunnos ja peittävyys, , voimme pakottaa selaimen tekemään animaatiota GPU: lla eikä Suoritin.

Kuinka GPU auttaa meitä sujuvassa animaatiossa?

GPU on toinen pieni kone, joka käsittelee animaatiomme, ja se pystyy käsittelemään suuren määrän käyttöliittymälaskelmia.

Joten, kun komposiittikerroksen luominen käynnistyy, se luo toisen kerroksen. Tämä on toinen tapa auttaa meitä välttämään animoidun elementin ja muiden käyttöliittymän elementtien uudelleen renderointia.

Alla olevassa kuvassa molemmat punaiset pallot näyttävät olevan samalla kerroksella. Mutta kun siirrämme tätä kerrosta 3D-kiertona, havaitsemme, että Muunna animaatiossa on toinen kerros, joka on luotu punaista palloa varten, joka tarjoaa sujuvan animaation.

GPU pitää tämän renderöintipaikan muistissa ja uudelleensuuntaamatta , voi laittaa tämän kerroksen muiden päälle. Mutta vasemmassa yläkulmassa olevan animaation tapauksessa sama kerros renderöidään uudestaan ​​ja uudestaan ​​näiden ominaisuuksien muutosten vuoksi. Jos tarkistamme näiden kahden CSS-ominaisuuden toiminnan, näemme, että molemmat ominaisuudet vasemmalle ja top vaikuttaa ulkoasuun aiheuttaen myös maalaus- ja komposiittitoiminnon.

Käännä vs Alkuun / Vasen

Yllä olevalla pallon animaatiolla on selkeä ero kääntää vs. ylä / vasen .

Ylä / vasen animaatio, pallo renderöidään jokaisesta sijainnista, kunnes se saavuttaa lopullisen määränpään, ja kun se alkaa jälleen liikkua alkuasentoon, se aloittaa renderointiosan.

Huomaa: Purppura väri edustaa punaisen pallon asettelun luomista, ja vihreää väriä käytetään pikselien viilaamiseen.

Molemmat yllä olevat kuvat ovat kuvakaappaus siitä, miten käännetään kuin ylhäältä / vasemmalta .

Korostamalla jokaisen yksittäisen tehtävän, alamme ymmärtää että tehtävän suorittama toiminta on erilainen molemmissa tapauksissa. Ylä- ja vasemmassa tapauksessa tehtävä suoritti asettelun luomisen, maalaamisen ja tyylin uudelleenlaskennan. Jos kyseessä on käännös yksi tehtävä, jonka GPU siirtää komposiittikerrosta tekemättä mitään DOM: ssa.

Joten GPU: n virralla pidämme päälangan ilmaiseksi. Tämä auttaa meitä parantamaan sovellusten suorituskykyä, ja pääketjuamme on kiireinen renderöinti.

Yllä oleva suorituskykymittakaavio tarjoaa enemmän todisteita, jotka selittävät tarkan laajuuden, jonka päälanka on varattu asettelun ja tyylin uudelleenlaskennassa. Tämä kaavio heijastaa jatkuvasti käyttöliittymässä tapahtuvia muutoksia.

Vastaa

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *