Monitorování výkonu v animacích CSS


(Virendra Singh) (22. dubna 2020)

Animace pomocí JavaScriptu ? nebo Animace pomocí CSS ?

Tato otázka zasáhne každého vývojáře v jeho technické kariéře jednou, nebo pravděpodobně dvakrát či více.

Postupem času si geekové z Javascriptu vymysleli spoustu knihoven pro animaci v prohlížeči a všichni se zdá být přesvědčen o použití těchto knihoven jako běžného řešení. Ale vydržte, je to správné řešení? Měli bychom dělat animaci pomocí JavaScriptu? Nebo se můžeme spolehnout na nativní implementaci CSS, abychom mohli animaci provádět lépe a efektivněji?

Protože čtete tento blog, předpokládám, že animace JavaScriptu znáte. Pojďme tedy podrobně prozkoumat „animaci založenou na CSS“ a různé příchutě animace CSS spolu s jejich dopady na výkon.

Základ animace závisí na některých vlastnostech CSS, které budete často používat v těžké CSS animaci implementace.

pozice: (absolutní / relativní)

transformace

neprůhlednost

vlevo, vpravo, nahoře, dole a mnoho dalších.

Začněme tím, že se podíváme na výsledky dvou experimentů s různými vlastnostmi CSS pro animaci.

(a) absolutní pozice s levým a horním

(b) transformovat

Proč se navíc na základě těchto experimentů nepokusíme vyvodit závěry ohledně výkonu a doby vykreslení?

Podíváme-li se na tyto dva příklady, máme pocit, že podobné funkčnost byla imp navzdory použití různých přístupů. Když však měříme metriky výkonu v nástroji chrome dev, vidíme skutečný rozdíl z hlediska výkonu pro oba případy.

Než se podrobně ponoříme do porozumění těmto metrikám výkonu, musíme pochopit, jak prohlížeč vykreslí uživatelské rozhraní a všechny akce, které provádí, když dojde k jakékoli aktualizaci v uživatelském rozhraní.

Vytváření uživatelského rozhraní tedy začíná:

1) Vypočítejte styly, které budou použity na prvky (Přepočítat styl)

2) Vytvořte rozvržení prvků a umístěte je na obrazovku (Rozvržení)

3) Přidejte pixely do všech vytvořených rozvržení, jde spíše o vytváření bitmap pro každou vrstvu. GPU používá tuto bitmapu k vykreslení vrstvy na obrazovce (Malování)

4) Nakonec vytvořte vrstvy na obrazovce a vytvořte hromadu vrstev. Pohled shora na tento zásobník bude vypadat jako úplná webová stránka, na které má každý prvek svou vlastní pozici (složené vrstvy).

Vytváření složené vrstvy je místo, kde procesor mluví s GPU, aby zvládl animace. Pomocí vlastností, jako je transformace a neprůhlednost, můžeme prohlížeč přinutit k animaci pomocí GPU místo CPU.

Jak nám tedy GPU pomáhá provádět plynulou animaci?

GPU je další malý stroj pro zpracování naší animace a dokáže zpracovat velké množství výpočtů uživatelského rozhraní.

Takže když se spustí vytváření kompozitní vrstvy, vytvoří další vrstvu. Toto je další způsob, jak nám pomoci vyhnout se opětovnému vykreslení prvku, který se animuje, a dalších částí prvků uživatelského rozhraní.

Na následujícím obrázku vypadají obě červené koule ve stejné vrstvě. Když ale tuto vrstvu přesuneme ve 3D rotaci, zjistíme, že Transformace animace má další vrstvu, která byla vytvořena pro červenou kouli a poskytuje plynulou animaci.

GPU udržuje tento strom objektu vykreslení v paměti a bez opětovného vykreslení , může tuto vrstvu umístit na ostatní. Ale v případě animace v levém horním rohu se stejná vrstva vykresluje znovu a znovu kvůli změnám v těchto vlastnostech. Pokud zkontrolujeme chování těchto dvou vlastností CSS, uvidíme, že obě vlastnosti left a nahoru ovlivnit rozložení, což také způsobí překreslení a složenou operaci.

Přeložit vs Nahoru / Vlevo

Výše ​​uvedená animace míče má jasný rozdíl mezi přeložit vs nahoře / vlevo .

V případě nahoře / vlevo animace, míč se vykresluje na každé pozici, dokud nedosáhne konečného cíle, a když se znovu začne pohybovat do výchozí polohy, spustí vykreslovací část.

Poznámka: Fialová barva představuje vytvoření rozložení červené koule a zelená barva se používá k ukládání pixelů.

Oba obrázky nahoře jsou ukázkou toho, jak přeložit výkony nahoře / vlevo .

Zvýrazněním jednoho úkolu každého z nich začneme rozumět že aktivita prováděná úkolem je v obou případech odlišná. V horním / levém případě provedl úkol vytvoření rozložení, malování a přepočet stylu. V případě překladu je jediným úkolem GPU přesouvá složenou vrstvu bez vykreslování čehokoli v DOMu.

Takže s výkonem GPU udržujeme naše hlavní vlákno volné. To nám pomáhá zvýšit výkon aplikací a naším hlavním vláknem je zaneprázdněné rozvržení vykreslování.

Výše ​​uvedený metrický graf výkonu poskytuje více důkazů a vysvětluje přesný rozsah, v jakém je naše hlavní vlákno zaneprázdněno přepočítáním rozložení a stylu. Tento graf průběžně odráží změny probíhající v uživatelském rozhraní.

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *