Nowoczesne przeglądarki mogą tanio animować 2 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: generowanie geometrii i pozycji każdego elementu.
- Paint: wypełnij piksele każdego elementu.
- Kompozycja: elementy są rozdzielane na warstwy i rysowane 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 łączeniem. Animacja czegoś, co zmienia układ, jest więc droższa niż animacja czegoś, co zmienia tylko komponowanie.
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, geometria innych elementów może wymagać ponownego obliczenia.
Jeśli np. zmienisz szerokość elementu <html>, może to wpłynąć na wszystkie 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 się zmienił, 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.
Dopóki ta właściwość znajduje się na osobnej warstwie, zmiany w niej mogą być obsługiwane przez GPU na etapie tworzenia kompozycji.
Przeglądarki oparte na Chromium i WebKit tworzą nową warstwę dla każdego elementu, który ma przejście lub animację CSS w 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. Warstwy renderowania przeglądarki działają na podobnej zasadzie.
Przeglądarka dobrze decyduje, 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 uważać przy tworzeniu nowych warstw, 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. Może to spowodować ograniczenie 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 znanym jako wątek 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 powoduje wykonanie operacji paint lub layout albo obu jednocześnie, wymagany będzie wątek główny. 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 czyni to pytanie nieistotne.