Nowoczesne przeglądarki mogą tanio animować 2 właściwości CSS: transform i opacity.
Jeśli animujesz cokolwiek innego, prawdopodobnie nie osiągniesz płynnych 60 klatek na sekundę.
Z tego posta dowiesz się, dlaczego tak jest.
Wydajność animacji i liczba klatek
Przyjmuje się, że docelowa liczba klatek podczas animowania czegokolwiek w internecie to 60 klatek na sekundę. Ta liczba klatek zapewni płynność animacji. W internecie klatka to czas potrzebny na wykonanie wszystkich czynności wymaganych do zaktualizowania i ponownego narysowania ekranu. Jeśli każda klatka nie zostanie wyrenderowana w ciągu 16,7 ms (1000 ms / 60 ≈ 16,7), użytkownicy zauważą opóźnienie.
Potok renderowania
Aby wyświetlić coś na stronie, przeglądarka musi wykonać te czynności w podanej kolejności:
- Styl: oblicz style, które mają zastosowanie do elementów.
- Układ: generowanie geometrii i położenia każdego elementu.
- Malowanie: wypełnij piksele każdego elementu.
- Kompozycja: rozdziel elementy na warstwy i narysuj je na ekranie.
Te 4 kroki są nazywane potokiem renderowania przeglądarki.
Jeśli animujesz coś na stronie, która została już wczytana, te czynności muszą zostać wykonane ponownie. Proces ten rozpoczyna się od kroku, który należy zmienić, aby umożliwić animację.
Jak wspomnieliśmy wcześniej, te czynności są wykonywane po kolei. Jeśli na przykład animujesz element, który zmienia układ, kroki malowania i komponowania również muszą zostać wykonane ponownie. Animowanie czegoś, co zmienia układ, jest więc bardziej kosztowne niż animowanie czegoś, co zmienia tylko komponowanie.
Animowanie właściwości układu
Zmiany układu obejmują obliczanie geometrii (pozycji i rozmiaru) wszystkich elementów, których dotyczy zmiana.
Jeśli zmienisz jeden element, może być konieczne ponowne obliczenie geometrii innych elementów.
Jeśli na przykład zmienisz szerokość elementu <html>, może to wpłynąć na wszystkie jego elementy podrzędne.
Ze względu na sposób, w jaki elementy wychodzą poza obszar i wpływają na siebie nawzajem, zmiany w dalszej części drzewa mogą czasami powodować obliczenia układu aż do samego początku.
Im większe jest drzewo widocznych elementów, tym dłużej trwa obliczanie układu.
Animowanie właściwości malowania
Rysowanie to proces określania kolejności, w jakiej elementy mają być rysowane na ekranie. Jest to często najdłużej działające zadanie w potoku.
Większość renderowania w nowoczesnych przeglądarkach odbywa się za pomocą rasteryzatorów programowych. W zależności od tego, jak elementy w aplikacji są pogrupowane w warstwy, może być konieczne narysowanie innych elementów oprócz tego, który uległ zmianie.
Animowanie właściwości złożonych
Komponowanie to proces dzielenia strony na warstwy, przekształcania informacji o tym, jak strona powinna wyglądać, w piksele (rasteryzacja) i łączenia warstw w celu utworzenia strony (komponowanie).
Dlatego właściwość opacity znajduje się na liście elementów, których animowanie jest tanie.
Dopóki ta właściwość znajduje się w osobnej warstwie, zmiany w niej mogą być obsługiwane przez procesor graficzny podczas etapu kompozycji.
Przeglądarki oparte na Chromium i WebKit tworzą nową warstwę dla każdego elementu, który ma przejście lub animację CSS na opacity.
Co to jest warstwa?
Umieszczając elementy, które mają być animowane lub przechodzić w inne stany, na nowej warstwie, przeglądarka musi ponownie narysować tylko te elementy, a nie wszystko inne. Możesz znać koncepcję warstwy z Photoshopa, która zawiera wiele elementów, które można przenosić razem. Warstwy renderowania przeglądarki działają podobnie.
Przeglądarka dobrze radzi sobie z określaniem, które elementy powinny znajdować się w nowej warstwie, ale jeśli się pomyli, można wymusić utworzenie warstwy. Więcej informacji znajdziesz w artykule Jak tworzyć animacje o wysokiej wydajności. Tworzenie nowych warstw powinno być jednak starannie przemyślane, ponieważ każda warstwa zużywa pamięć. Na urządzeniach z ograniczoną pamięcią tworzenie nowych warstw może powodować większe problemy z wydajnością niż te, które próbujesz rozwiązać. Dodatkowo tekstury każdej warstwy muszą zostać przesłane do procesora graficznego. Dlatego możesz napotkać ograniczenia przepustowości między procesorem a GPU.
Skuteczność CSS a JavaScript
Możesz się zastanawiać, czy z punktu widzenia wydajności lepiej jest używać animacji CSS czy JavaScript.
Animacje oparte na CSS i Web Animations (w przeglądarkach obsługujących interfejs API) są zwykle obsługiwane w wątku zwanym wątkiem kompozytora. Różni się on od głównego wątku przeglądarki, w którym wykonywane są style, układ, renderowanie i JavaScript. Oznacza to, że jeśli przeglądarka wykonuje w wątku głównym jakieś wymagające zadania, animacje mogą działać bez przerw.
Jak wyjaśniono w tym artykule, inne zmiany przekształceń i przezroczystości w wielu przypadkach mogą być też obsługiwane przez wątek kompozytora.
Jeśli jakakolwiek animacja wywołuje malowanie lub układ (albo oba te działania), wątek główny będzie musiał wykonać pracę. Dotyczy to zarówno animacji CSS, jak i JavaScript. Obciążenie związane z układem lub rysowaniem prawdopodobnie przyćmi wszelkie działania związane z wykonywaniem kodu CSS lub JavaScript, co sprawi, że pytanie stanie się bezprzedmiotowe.