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 negatywne 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ć przemieszczanie się innych elementów na stronie lub zmianę ich rozmiaru. 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, zwykle trzeba będzie narysować stronę lub jej część, co jest zwykle jeszcze droższe 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

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ć 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 pod kątem wydajności omawia 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 wykonuje w wątku głównym zadania wymagające dużych zasobów, animacje mogą być kontynuowane bez przerwy.

  • Inne zmiany w przekształceniach 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.