Animacje muszą dobrze działać, w przeciwnym razie negatywnie wpływają na wrażenia użytkownika.
Utrzymuj 60 klatek na sekundę przy każdym animowaniu, ponieważ mniejsza liczba zacina się lub zacina, co będzie zauważalne dla użytkowników i negatywnie wpływa na ich wrażenia.
- Upewnij się, że animacje nie powodują problemów z wydajnością. Upewnij się też, że znasz wpływ animowania danej właściwości CSS.
- Szczególnie kosztowne jest animowanie właściwości, które zmieniają geometrię strony (układ) lub powodują malowanie.
- Jeśli to możliwe, staraj się zmieniać przekształcenia i przezroczystość.
- Użyj parametru
will-change, by przeglądarka wiedziała, co planujesz animować.
Animowanie właściwości nie jest bezpłatne, a niektóre z nich są tańsze. Na przykład animowanie właściwości width i height elementu zmienia jego geometrię i może spowodować przesunięcie lub zmianę rozmiaru innych elementów na stronie. Ten proces nazywamy układem (lub przeformatowaniem w przeglądarkach opartych na Gecko, takich jak Firefox) i może być kosztowny w przypadku strony z wieloma elementami. Po każdym uruchomieniu układu strona lub jej część musi zostać pomalowana, co jest zwykle droższe niż samodzielna operacja układu.
Gdy to możliwe, unikaj animowania właściwości, które uruchamiają układ lub wyrenderowanie. W przypadku większości nowoczesnych przeglądarek oznacza to ograniczenie animacji do opacity lub transform, z których każda może być optymalizowana przez przeglądarkę. Nie ma znaczenia, czy animacja jest obsługiwana przez JavaScript czy CSS.
Przeczytaj pełny przewodnik na temat tworzenia animacji o wysokiej wydajności.
Używanie właściwości will-change
Użyj właściwości will-change, aby upewnić się, że przeglądarka wie, że zamierzasz zmienić właściwość elementu. Dzięki temu przeglądarka może wprowadzić najodpowiedniejsze optymalizacje przed wprowadzeniem zmiany. Nie nadużywaj właściwości will-change, bo może to spowodować marnowanie zasobów przez przeglądarkę, co z kolei spowoduje jeszcze większe problemy z wydajnością.
Ogólna zasada jest taka, że jeśli animacja może zostać aktywowana w ciągu następnych 200 ms (w wyniku działania użytkownika lub stanu aplikacji), dobrym pomysłem będzie will-change do animowania elementów. W większości przypadków element w bieżącym widoku aplikacji, który chcesz animować, powinien być will-change włączony dla właściwości, które zamierzasz zmienić. W przypadku przykładowego pola, którego używaliśmy w poprzednich przewodnikach, dodanie atrybutu will-change dla przekształceń i przezroczystości wygląda tak:
.box {
will-change: transform, opacity;
}
Przeglądarki, które obsługują tę funkcję (obecnie większość nowoczesnych przeglądarek), wprowadzą odpowiednie optymalizacje, aby umożliwić zmianę lub animowanie tych właściwości.
Wydajność CSS a JavaScript
W internecie można znaleźć wiele stron i wątków komentarzy, w których omawia się względne zalety animacji CSS i JavaScript z perspektywy wydajności. Oto kilka kwestii, o których warto pamiętać:
Animacje oparte na CSS i animacje internetowe, jeśli są obsługiwane natywnie, 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 wykonywane są style, układy, malowanie i JavaScript. Oznacza to, że jeśli przeglądarka uruchamia kosztowne zadania w wątku głównym, animacje mogą być odtwarzane bez zakłóceń.
W wielu przypadkach inne zmiany przekształceń i przezroczystości również mogą być obsługiwane przez wątek kompozytora.
Jeśli jakakolwiek animacja wywołuje wyrenderowanie, układ lub oba te elementy, „wątek główny” będzie wymagany. Dotyczy to zarówno animacji opartych na CSS, jak i JavaScript, a nakład pracy związany z układem lub malowaniem prawdopodobnie przeszkodzi w pracy związanej z wykonywaniem CSS lub JavaScript i sprawia, że pytanie jest pozbawione sensu.