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.

Paul Lewis

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

W tej kwestii są 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

Najskuteczniejsza wersja potoku pikseli nie wymaga ani układu, ani malowania, a jedynie zmian w kompozycji:

Aby to osiągnąć, musisz ograniczyć się do zmiany właściwości, które może obsłużyć sam kompozytor. Obecnie są tylko 2 usługi, w przypadku 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.

Uwaga: jeśli obawiasz się, że nie uda Ci się ograniczyć animacji tylko do tych właściwości, zapoznaj się z zasadami FLIP, które mogą pomóc Ci przypisać animacje do zmian w transformacjach i przezroczystości z droższych właściwości.

Promowanie elementów, które chcesz animować

Jak wspomnieliśmy w sekcji „Upraszczanie złożoności i redukowanie obszarów pędzla”, elementy, które chcesz animować, powinny mieć własne warstwy:

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

W przypadku starszych przeglądarek lub tych, 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ą zostać przesł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.

Ostrzeżenie : nie promuj elementów bez potrzeby.

Poznawanie warstw w aplikacji za pomocą Narzędzi deweloperskich w Chrome

Aby zrozumieć warstwy w aplikacji i wiedzieć, dlaczego element ma warstwę, musisz włączyć profil Paint w osi czasu w Narzędziach deweloperskich Chrome:

Gdy ta opcja jest włączona, możesz nagrać film. Po zakończeniu nagrywania możesz kliknąć poszczególne klatki, które znajdują się między paskami klatek na sekundę a szczegółami:

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 danym ujęciu, a także powodów utworzenia każdej z nich.

W tym widoku możesz śledzić liczbę warstw. Jeśli poświęcasz dużo czasu na kompozycję podczas wykonywania działań mających kluczowe znaczenie dla wydajności, 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.