Animacje muszą mieć wysoką jakość, w przeciwnym razie będą negatywnie wpływać na wrażenia użytkownika.
Utrzymuj 60 klatek na sekundę podczas animowania, ponieważ im mniej przerw lub zacinań, będą one widoczne dla użytkowników i wpłyną negatywnie na ich wrażenia.
- Upewnij się, że Twoje animacje nie powodują problemów z wydajnością. Upewnij się też, że znasz efekty użycia danej właściwości CSS.
- Szczególnie kosztowne jest animowanie właściwości, które zmieniają geometrię (układ) strony lub powodując malowanie.
- W miarę możliwości pamiętaj o zmienianiu przekształceń i przezroczystości.
- Użyj
will-change, by mieć pewność, że przeglądarka będzie wiedzieć, co chcesz animować.
Animacja właściwości nie jest bezpłatna, a niektóre z nich są tańsze od innych. Na przykład animowanie width i height elementu zmienia jego geometrię i może spowodować przesunięcie innych elementów na stronie lub zmianę rozmiaru. W przeglądarkach opartych na gekonach, takich jak Firefox, ten proces nosi nazwę układu (lub przeformatowania). Jeśli strona zawiera dużo elementów, może być kosztowny. Po każdym wywołaniu układu strona lub jej część musi być pomalowana, co zwykle kosztuje nawet więcej niż sama operacja.
W miarę możliwości unikaj animowania właściwości, które uruchamiają układ lub wyrenderowanie. W przypadku większości współczesnych przeglądarek oznacza to ograniczenie animacji do opacity lub transform, które zapewniają wysoki poziom optymalizacji. Nie ma znaczenia, czy animacja jest obsługiwana przez JavaScript czy CSS.
Przeczytaj pełny przewodnik na temat tworzenia animacji o wysokiej wydajności.
Korzystanie z właściwości will-change
Użyj elementu will-change, aby poinformować przeglądarkę, że chcesz zmienić właściwość elementu. Dzięki temu przeglądarka może zastosować najlepsze optymalizacje przed wprowadzeniem zmiany. Nie nadużywaj jednak funkcji will-change, bo może to spowodować zużycie zasobów przez przeglądarkę, co z kolei spowoduje dalsze problemy z wydajnością.
Ogólna zasada jest taka, że jeśli w ciągu następnych 200 ms animacja może być aktywowana przez interakcję użytkownika lub stan aplikacji, włączenie will-change w animowanych elementach to dobry pomysł. 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 w przypadku właściwości, które chcesz zmienić. W przypadku przykładowej ramki, która była używana w poprzednich przewodnikach, dodanie atrybutu will-change dla przekształceń i przezroczystości wygląda tak:
.box {
will-change: transform, opacity;
}
Teraz przeglądarki, które go obsługują, obecnie większość nowoczesnych przeglądarek, wdrożą odpowiednie optymalizacje umożliwiające zmianę lub animowanie tych właściwości.
Skuteczność CSS a JavaScript
W internecie jest wiele stron i wątków komentarzy, w których omawiamy 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ę to 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.
Inne zmiany przekształceń i przezroczystości mogą w wielu przypadkach być również obsługiwane przez wątek kompozytora.
Jeśli jakakolwiek animacja aktywuje wyrenderowanie, układ lub jedno i drugie, do działania będzie wymagany „wątek główny”. Dotyczy to zarówno animacji opartych na CSS i JavaScript, a nakład pracy związany z układem lub renderowaniem prawdopodobnie przyćmiewa całą pracę związaną z wykonywaniem CSS czy JavaScript, przez co pytanie staje się bezpodstawne.