Nowoczesne przeglądarki mogą tanio animować dwie właściwości CSS: transform i opacity.
Jeśli animujesz coś innego,
prawdopodobnie nie uzyskasz płynnych 60 FPS.
Ten post wyjaśnia, dlaczego tak się dzieje.
Wydajność animacji i liczba klatek
Ogólnie przyjmuje się, że podczas tworzenia animacji w internecie należy dążyć do liczby klatek 60 FPS. Dzięki temu animacje będą płynne. W internecie klatka to czas potrzebny na wykonanie wszystkich czynności wymaganych do zaktualizowania i ponownie narysowania ekranu. Jeśli każdy kadr nie zostanie wyświetlony 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ć te czynności w kolejności:
- Styl: obliczanie stylów zastosowanych do elementów.
- Układ: wygeneruj geometrię i pozycję każdego elementu.
- Farowanie: wypełnij warstwy poszczególnych elementów w pikselach.
- Kompozyt: narysuj warstwy na ekranie.
Te 4 etapy to przetwarzanie w przebiegu.
Gdy coś animujesz na stronie, która już się wczytała, musisz wykonać te czynności ponownie. Ten proces rozpoczyna się od kroku, który należy zmienić, aby umożliwić animację.
Jak już wspomnieliśmy, te czynności należy wykonywać w kolejności. Jeśli na przykład animujesz coś, co zmienia układ, musisz ponownie wykonać czynności związane z malowaniem i składaniem. Animacja czegoś, co zmienia układ, jest więc droższa niż animacja czegoś, co zmienia tylko kompozycję.
Animowanie właściwości układu
Zmiany układu wymagają obliczenia geometrii (pozycji i wielkości) wszystkich elementów, na które mają wpływ.
Jeśli zmienisz jeden element, może być konieczne ponowne obliczenie geometrii pozostałych.
Jeśli na przykład zmienisz szerokość elementu <html>, może to wpłynąć na jego elementy podrzędne.
Ze względu na sposób, w jaki elementy się na siebie nakładają i na siebie wpływają, zmiany w dolnej części drzewa mogą czasami powodować ponowne przeliczenie układu aż do jego górnej części.
Im większe drzewo widocznych elementów, tym dłużej trwa obliczanie układu.
Animowanie właściwości farby
Paint to proces określania kolejności, w jakiej elementy mają być wyświetlane na ekranie. Jest to często najdłużej trwające ze wszystkich zadań w potoku.
Większość malowania w nowoczesnych przeglądarkach jest wykonywana za pomocą rasteryzatorów programowych. W zależności od tego, jak elementy w aplikacji są grupowane na warstwy, może być konieczne narysowanie nie tylko elementu, który uległ zmianie, ale też innych elementów.
Animowanie właściwości złożonych
Złożenie to proces dzielenia strony na warstwy, konwertowania informacji o jej wyglądzie na piksele (rasteryzacja) i łączenia warstw w celu utworzenia strony (złożenie).
Dlatego właśnie właściwość opacity znajduje się na liście elementów, które można animować tanio.
Jeśli właściwość znajduje się we własnej warstwie, jej zmiany mogą być przetwarzane przez GPU podczas kroku komponowania.
Przeglądarki oparte na Chromium i WebKit tworzą nową warstwę dla każdego elementu, który ma przejście lub animację CSS w trybie opacity.
Co to jest warstwa?
Umieszczenie elementów, które mają być animowane lub przekształcane, na nowej warstwie powoduje, że przeglądarka musi tylko ponownie narysować te elementy, a nie wszystkie inne. Możesz być już zaznajomiony z konceptem warstwy w Photoshopie, która zawiera wiele elementów, które można przenosić razem. Podobnie działa warstwy renderowania w przeglądarce.
Przeglądarka dobrze radzi sobie z podejmowaniem decyzji o tym, które elementy powinny znajdować się na nowej warstwie, ale jeśli pominie jakiś element, możesz spróbować ręcznie utworzyć warstwę. Więcej informacji znajdziesz w artykule Jak tworzyć wydajne animacje. Należy jednak tworzyć nowe warstwy z uwagą, ponieważ każda z nich wykorzystuje pamięć. Na urządzeniach z ograniczoną ilością pamięci tworzenie nowych warstw może spowodować więcej problemów z wydajnością niż ten, który próbujesz rozwiązać. Dodatkowo tekstury każdej warstwy muszą zostać przesłane do GPU. Dlatego możesz napotkać ograniczenia przepustowości między procesorem a kartą graficzną.
Skuteczność kodu CSS w porównaniu z kodem JavaScript
Możesz się zastanawiać, czy z perspektywy wydajności lepiej jest używać do animacji CSS-u czy JavaScriptu.
Animacje oparte na CSS oraz animacje internetowe (w przeglądarkach obsługujących interfejs API) są zwykle obsługiwane w wątku zwanym wątkiem kompozytora. Jest to inne niż główny wątek przeglądarki, w którym wykonywane są stylizacja, układ, malowanie i kod JavaScript. Oznacza to, że jeśli przeglądarka wykonuje w wątku głównym zadania wymagające dużych zasobów, animacje mogą być kontynuowane bez przerwy.
Jak wyjaśniono w tym artykule, inne zmiany w przekształceniach i przezroczystości mogą w wielu przypadkach być obsługiwane przez wątek kompozytora.
Jeśli jakakolwiek animacja wywołuje wyrenderowanie, układ lub obie te czynności, wątek główny będzie wymagany. Dotyczy to zarówno animacji CSS, jak i JavaScriptu. Koszty związane z układem lub renderowaniem będą prawdopodobnie znacznie mniejsze niż koszty związane z wykonywaniem kodu CSS lub JavaScriptu, co sprawia, że pytanie jest bezcelowe.