Animacje i wydajność

Animacje muszą działać dobrze, w przeciwnym razie negatywnie wpływają na wrażenia użytkownika.

Paul Lewis

Sam Thorogood

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 niekorzystnie wpłynie na ich wrażenia.

• Upewnij się, że animacje nie powodują problemów z wydajnością. upewnij się, że znasz wpływ animacji 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.
• W miarę możliwości staraj się zawsze trzymać się zmian przekształceń i przezroczystości.
• Użyj parametru will-change, by mieć pewność, że przeglądarka wie, co chcesz 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. Przy 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 – oba te formaty są w dużym stopniu optymalizowane przez przeglądarkę. nie ma znaczenia, czy animacja jest obsługiwana przez JavaScript, czy przez CSS.

Przeczytaj pełny przewodnik na temat tworzenia animacji o wysokiej wydajności.

Używanie właściwości will-change

Użyj tagu 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 funkcji will-change jednak, ponieważ 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ć uruchomiona w ciągu 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” które ciężko będzie podjąć. 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.