Animacje muszą działać płynnie, w przeciwnym razie będą negatywnie wpływać na wrażenia użytkownika.
Podczas animacji zawsze utrzymuj 60 FPS, ponieważ mniejsza liczba klatek na sekundę powoduje zacinanie lub zatrzymywanie się, co jest zauważalne dla użytkowników i negatywne wpływa na ich wrażenia.
- Zadbaj o to, aby animacje nie powodowały problemów z wydajnością. Sprawdź, jaki wpływ na animację ma dana właściwość CSS.
- Animowanie właściwości, które zmieniają geometrię strony (układ) lub powodują malowanie, jest szczególnie kosztowne.
- Tam, gdzie to możliwe, ograniczaj się do zmiany transformacji i przezroczystości.
- Użyj
will-change
, aby poinformować przeglądarkę, co chcesz animować.
Animowanie właściwości nie jest bezpłatne, a animowanie niektórych właściwości jest tańsze niż innych. Na przykład animowanie właściwości width
i height
elementu zmienia jego geometrię i może powodować przemieszczanie się innych elementów na stronie lub zmianę ich rozmiaru. Ten proces nazywa się layout (lub reflow w przypadku przeglądarek opartych na Gecko, takich jak Firefox) i może być kosztowny, jeśli strona zawiera dużo elementów. Gdy zostanie wywołany układ, zwykle trzeba będzie narysować stronę lub jej część, co jest zwykle jeszcze droższe niż sama operacja układu.
W miarę możliwości unikaj animowania właściwości, które wywołują układ lub malowanie. W przypadku większości nowoczesnych przeglądarek oznacza to ograniczenie animacji do opacity
lub transform
, które przeglądarka może zoptymalizować. Nie ma znaczenia, czy animacja jest obsługiwana przez JavaScript czy CSS.
Zapoznaj się z pełnym przewodnikiem dotyczącym tworzenia wydajnych animacji.
Korzystanie z właściwości will-change
Użyj tagu will-change
, aby poinformować przeglądarkę, że chcesz zmienić właściwość elementu. Dzięki temu przeglądarka może wprowadzić najbardziej odpowiednie optymalizacje przed wprowadzeniem zmiany. Nie nadużywaj jednak will-change
, ponieważ może to spowodować marnowanie zasobów przez przeglądarkę, co z kolei powoduje jeszcze więcej problemów z wydajnością.
Ogólna zasada mówi, że jeśli animacja może zostać uruchomiona w ciągu 200 ms (np. przez interakcję użytkownika lub stan aplikacji), warto użyć will-change
w elementach animowanych. W większości przypadków każdy element w bieżącym widoku aplikacji, który chcesz animować, powinien mieć włączoną opcję will-change
dla właściwości, które chcesz zmienić. W przypadku przykładu pudełka, którego używaliśmy w poprzednich przewodnikach, dodanie will-change
do transformacji i przezroczystości wygląda tak:
.box {
will-change: transform, opacity;
}
Teraz przeglądarki, które je obsługują (obecnie większość nowoczesnych przeglądarek), będą przeprowadzać odpowiednie optymalizacje, aby umożliwić zmianę lub animację tych właściwości.
Skuteczność kodu CSS w porównaniu z kodem JavaScript
W internecie jest wiele stron i wątków komentarzy, w których pod kątem wydajności omawia się zalety animacji CSS i JavaScript. Oto kilka kwestii, o których warto pamiętać:
Animacje oparte na CSS oraz animacje internetowe, które są obsługiwane natywnie, 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 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.
Inne zmiany w przekształceniach i przezroczystości mogą w wielu przypadkach być obsługiwane przez wątek kompozytora.
Jeśli jakakolwiek animacja powoduje renderowanie lub układ, albo jedno i drugie, „wątek główny” będzie musiał działać. Dotyczy to zarówno animacji opartych na CSS, jak i JavaScript. Koszty związane z układem lub renderowaniem prawdopodobnie będą znikome w porównaniu z kosztami związanymi z wykonywaniem kodu CSS lub JavaScriptu, co sprawia, że pytanie jest bezcelowe.