Animacje i wydajność

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 negatywnie 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 widthheight elementu zmienia jego geometrię i może powodować przesuwanie się innych elementów na stronie lub zmianę ich rozmiaru. Ten proces nazywa się layoutem (lub reflowem 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ć całą stronę lub jej część, 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.

Zapoznaj się z pełnym przewodnikiem dotyczącym tworzenia wydajnych animacji.

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

Browser Support

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

Source

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 porównuje się zalety animacji CSS i JavaScript pod kątem wydajności. 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 transformacji 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.