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 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 widthheight 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.