Animacje i wydajność

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

Sam Thorogood

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 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 powodować przesuwanie 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, 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.

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 upewnić się, że przeglądarka wie, że zamierzasz 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 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 oraz animacje internetowe, które są obsługiwane natywnie, są zwykle obsługiwane w wątku zwanym „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 powoduje renderowanie lub układanie, albo jedno i drugie, do działania będzie potrzebny „wątek główny”. 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.