Nowoczesne przeglądarki mogą tanio animować 2 właściwości CSS: transform i opacity.
Jeśli będziesz animować coś innego, istnieje ryzyko, że nie uzyskasz płynnych animacji 60 klatek na sekundę (FPS).
Z tego posta dowiesz się, dlaczego tak jest.
Wydajność animacji i liczba klatek
Powszechnie przyjmuje się, że do animowania czegokolwiek w internecie celem jest 60 klatek na sekundę. Ta liczba klatek zapewnia płynność animacji. W internecie ramka to czas potrzebny na aktualizację i ponowne pomalowanie ekranu. Jeśli każda klatka nie zakończy się w ciągu 16,7 ms (1000 ms / 60 ≈ 16,7), użytkownicy zauważą opóźnienie.
Potok renderowania
Aby wyświetlić coś na stronie internetowej, przeglądarka musi wykonać następujące kroki:
- Styl: oblicza style zastosowane do elementów.
- Układ: generuje geometrię i położenie każdego elementu.
- Paint: wypełnij piksele każdego elementu i dodaj je do warstw.
- Kompozytowa: narysuj warstwy na ekranie.
Te 4 kroki są nazywane potokiem renderowania przeglądarki.
Gdy animujesz coś na stronie, która została już wczytana, te czynności muszą zostać wykonane jeszcze raz. Proces ten zaczyna się od kroku, który trzeba zmienić, aby animacja mogła działać.
Jak już wspomnieliśmy, kroki te są sekwencyjne. Jeśli np. animujesz coś, co zmienia układ, musisz ponownie wykonać kroki renderowania i kompozycji. Utworzenie czegoś, co zmienia układ, jest więc droższe niż utworzenie animacji, która tylko zmienia komponowanie.
Animowanie właściwości układu
Zmiany układu obejmują obliczanie geometrii (położenia i rozmiaru) wszystkich elementów, na które wpływa zmiana.
Jeśli zmienisz jeden element, może być konieczne ponowne obliczenie
geometrii pozostałych elementów.
Jeśli na przykład zmienisz szerokość elementu <html>, może to wpłynąć na jego podrzędne elementy.
Ze względu na sposób, w jaki elementy się wychodzą i nachodzą na siebie, zmiany znajdujące się niżej w drzewie mogą czasami prowadzić do obliczenia układu z powrotem do góry.
Im większe drzewo widocznych elementów, tym dłużej trwa obliczanie układu.
Animowanie właściwości farby
Pain to proces określania, w jakiej kolejności elementy zostaną namalowane na ekranie. Jest to często najdłuższe wykonywanie wszystkich zadań w potoku.
Większość obrazów malowanych w nowoczesnych przeglądarkach jest malowana za pomocą rasteryzatorów programowych. W zależności od tego, jak elementy w aplikacji są zgrupowane w warstwy, może być konieczne pomalowanie innych elementów, oprócz tego, które uległy zmianie.
Animowanie właściwości złożonych
Komponowanie to proces podziału strony na warstwy, konwertowania informacji o tym, jak strona powinna wyglądać w piksele (rasteryzacji), oraz łączenia warstw w celu utworzenia strony (komponowania).
Właśnie dlatego właściwość opacity znajduje się na liście elementów, które są tanie w animacji.
Jeśli ta właściwość znajduje się we własnej warstwie, zmiany w niej mogą być obsługiwane przez GPU w kroku komponowania.
Przeglądarki oparte na Chromium i WebKit tworzą nową warstwę dla każdego elementu, który opacity zawiera przejście lub animację CSS.
Co to jest warstwa?
Gdy umieścisz elementy, które będą animowane lub przeniesione do nowej warstwy, przeglądarka musi tylko ponownie malować te elementy, a nie wszystko inne. Być może znasz koncepcję warstwy w Photoshopie zawierającą elementy, które można przesuwać razem. Warstwy renderowania przeglądarki są podobne do tej koncepcji.
Przeglądarka dobrze sobie radzi z podejmowaniem decyzji o tym, jakie elementy powinny znaleźć się w nowej warstwie, ale jeśli go pominie, istnieją sposoby na wymuszanie utworzenia warstwy. Możesz się tego dowiedzieć z artykułu Jak tworzyć animacje o dużej skuteczności. Przy tworzeniu nowych warstw należy zachować ostrożność, ponieważ każda z nich wykorzystuje pamięć. Na urządzeniach z ograniczoną pamięcią tworzenie nowych warstw może powodować większe problemy z wydajnością niż ten, który próbujesz rozwiązać. Dodatkowo trzeba przesłać tekstury każdej warstwy do GPU. Dlatego możesz natrafić na ograniczenia przepustowości między procesorem a GPU.
Skuteczność CSS a JavaScript
Być może zastanawiasz się, czy z perspektywy skuteczności lepiej będzie używać CSS czy JavaScriptu do animacji?
Animacje oparte na CSS i animacje internetowe (w przeglądarkach obsługujących interfejs API) są zwykle obsługiwane w wątku nazywanym wątkiem kompozytora. Różni się on od głównego wątku przeglądarki, w którym są wykonywane style, układ, malowanie i JavaScript. Oznacza to, że jeśli przeglądarka wykonuje kosztowne zadania w wątku głównym, te animacje mogą być kontynuowane bez przerywania pracy.
Jak wyjaśniono w tym artykule, w wielu przypadkach wątek kompozytora może również obsługiwać inne zmiany przekształceń i przezroczystości.
Jeśli jakakolwiek animacja aktywuje wyrenderowanie, układ lub jedno i drugie, do działania będzie potrzebny wątek główny. Dotyczy to zarówno animacji CSS, jak i JavaScript, a narzut układu lub malowania z pewnością przyćmiewa całą pracę związaną z wykonywaniem CSS czy JavaScript, co powoduje wyrenderowanie pytania.