Animacje i wydajność

Animacje muszą działać płynnie, w przeciwnym razie będą negatywnie wpływać na wrażenia użytkownika.

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ę też, że znasz wpływ animowania danej właściwości CSS.
  • Animowanie właściwości, które zmieniają geometrię strony (układ) lub powodują malowanie, jest szczególnie kosztowne.
  • Jeśli to możliwe, staraj się zmieniać przekształcenia i przezroczystość.
  • 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 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 spowodować przesunięcie lub zmianę rozmiaru innych elementów na stronie. 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, strona lub jej część musi zostać narysowana, co jest zwykle jeszcze bardziej kosztowne 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.

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

Korzystanie z właściwości will-change

Obsługa przeglądarek

  • Chrome: 36.
  • Edge: 79.
  • Firefox: 36.
  • Safari: 9.1.

Źródło

Użyj tagu will-change, aby poinformować przeglądarkę, że chcesz zmienić właściwość elementu. Dzięki temu przeglądarka może wprowadzić najodpowiedniejsze 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 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 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 porównuje 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 uruchamia kosztowne zadania w wątku głównym, animacje mogą być odtwarzane bez zakłóceń.

  • Inne zmiany w przekształceniach i przezroczystości mogą w wielu przypadkach 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. 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.