Zachowanie właściwości tylko dla kompozytora i zarządzanie liczbą warstw

Kompilacja to proces łączenia namalowanych części strony w celu wyświetlenia ich na ekranie.

Składanie polega na łączeniu narysowanych części strony w celu wyświetlenia ich na ekranie.

W tej kwestii istnieją 2 kluczowe czynniki, które wpływają na wydajność strony: liczba warstw kompozytora, którymi trzeba zarządzać, oraz właściwości używane do animacji.

Podsumowanie

• W animacjach ograniczaj się do zmian przekształceń i przezroczystości.
• Używaj elementów will-change lub translateZ, aby wyróżniać elementy ruchome.
• Unikaj nadużywania reguł promocji, ponieważ warstwy wymagają pamięci i zarządzania.

Używanie zmian przekształcenia i przezroczystości do tworzenia animacji

Najlepsza wersja potoku pikseli pozwala uniknąć zarówno układu, jak i malowania oraz wymaga tylko komponowania zmian:

Aby to osiągnąć, musisz trzymać się zmian właściwości, które są obsługiwane przez sam kompozytor. Obecnie są tylko 2 usługi, dla których to się sprawdza: transforms i opacity:

Uwaga dotycząca korzystania z elementów transform i opacity: element, w którym zmieniasz te właściwości, musi znajdować się na własnej warstwie kompozytora. Aby utworzyć warstwę, musisz promować element. Opiszemy to w następnym kroku.

Promowanie elementów, które chcesz animować

Jak wspomnieliśmy w sekcji „Uprość złożoność malowania i ogranicz obszary do malowania”, należy przenieść elementy, które planujesz animować (wewnętrznie, nie przesadzaj), aby mieć własną warstwę:

.moving-element {
  will-change: transform;
}

W przypadku starszych przeglądarek lub przeglądarek, które nie obsługują funkcji will-change:

.moving-element {
  transform: translateZ(0);
}

Zarządzanie warstwami i unikanie ich eksplozji

Wiedząc, że warstwy często pomagają w zwiększaniu skuteczności, możesz być skłonny promować wszystkie elementy na stronie za pomocą kodu podobnego do tego:

* {
  will-change: transform;
  transform: translateZ(0);
}

To znaczy, że chcesz promować każdy element na stronie. Problem polega na tym, że każda utworzona przez Ciebie warstwa wymaga pamięci i zarządzania, a to nie jest bezpłatne. W rzeczywistości na urządzeniach z ograniczoną ilością pamięci wpływ na wydajność może znacznie przewyższać korzyści płynące z tworzenia warstwy. Tekstury każdego poziomu muszą być przesyłane do GPU, więc występują dodatkowe ograniczenia dotyczące przepustowości między procesorem a procesorem graficznym oraz pamięci dostępnej na potrzeby tekstur w procesorze graficznym.

Korzystanie z Narzędzi deweloperskich w Chrome w celu poznawania warstw w aplikacji

Aby poznać warstwy w aplikacji i dowiedzieć się, dlaczego element ma warstwę, musisz włączyć program profilujący Paint na osi czasu w Narzędziach deweloperskich w Chrome:

Gdy ta opcja jest włączona, możesz nagrać film. Po zakończeniu nagrywania możesz klikać pojedyncze klatki, które znajdują się między słupkami klatek na sekundę a informacjami:

Po kliknięciu tego przycisku w szczegółach pojawi się nowa opcja – karta warstwy.

Ta opcja powoduje wyświetlenie nowego widoku, który umożliwia przesuwanie, skanowanie i powiększanie wszystkich warstw w ramach danego kadru wraz z przyczynami ich utworzenia.

W tym widoku możesz śledzić liczbę warstw. Jeśli poświęcasz dużo czasu na łączenie warstw podczas wykonywania działań mających wpływ na wydajność, takich jak przewijanie lub przejścia (powinieneś dążyć do wartości około 4–5 ms), możesz użyć tych informacji, aby sprawdzić, ile masz warstw i dlaczego zostały utworzone, a potem zarządzać liczbą warstw w aplikacji.