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

Komponowanie polega na połączeniu wymalowanych części strony, aby wyświetlić je na ekranie.

Komponowanie polega na połączeniu wymalowanych części strony co nie jest wyświetlane na ekranie.

Na wydajność strony wpływają 2 kluczowe czynniki: liczba warstw kompozytora, którymi należy zarządzać, i właściwości używane na potrzeby animacji.

Podsumowanie

  • Możesz korzystać z opcji przekształcania i przezroczystości animacji.
  • Przesuń elementy za pomocą właściwości will-change lub translateZ.
  • Unikaj nadużywania reguł promocji. warstwy wymagają pamięci i zarządzania.

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

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

Potok pikselowy bez układu czy malowania.

Aby to osiągnąć, musisz trzymać się zmian właściwości, które są obsługiwane przez sam kompozytor. Obecnie są tylko 2 właściwości, które są prawdziwe – transform i opacity:

Właściwości, które możesz animować bez uruchamiania układu i malowania.

Stosowanie elementów transform i opacity wiąże się jednak z zastrzeżeniem, że element, w którym zmieniasz te właściwości, powinien znajdować się we własnej warstwie kompozytora. Aby utworzyć warstwę, musisz awansować element, który omówimy w następnej kolejności.

Promuj elementy, które planujesz animować

Jak wspomnieliśmy w artykule „Uproszczenie złożoności malowania i zmniejszenie obszaru malowania”. elementy, które zamierzasz animować (w uzasadnionym zakresie, nie należy przesadzać) w osobnej warstwie:

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

W przypadku starszych przeglądarek oraz takich, które nie obsługują tej funkcji, zmienią się następujące wersje:

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

Zarządzanie warstwami i unikanie eksplozji warstw

Nawet wtedy, gdy wiesz, że warstwy często poprawiają skuteczność, możesz promować wszystkie elementy na stronie za pomocą przykładu:

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

Oznacza to, że chcesz promować każdy element na stronie. Problem polega na tym, że każda utworzona warstwa wymaga pamięci i zarządzania, a korzystanie z niej nie jest bezpłatne. W przypadku urządzeń z ograniczoną pamięcią wpływ na wydajność może przeważać nad korzyściami wynikającymi z utworzenia warstwy. Tekstury każdej warstwy muszą być przesłane do GPU, więc istnieją dalsze ograniczenia dotyczące przepustowości między CPU i GPU oraz pamięci dostępnej dla tekstur w GPU.

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

Przełącznik narzędzia do profilowania malowania w Narzędziach deweloperskich w Chrome.

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

Po włączeniu tej funkcji możesz utworzyć nagranie. Po zakończeniu nagrywania możesz klikać pojedyncze klatki, które znajdują się między słupkami klatek na sekundę a informacjami:

Ramka, której deweloper chce profilować.

Pojawi się nowa opcja: karta warstwy.

Przycisk karty warstwy w Narzędziach deweloperskich w Chrome.

Zostanie wyświetlony nowy widok, który pozwala przesuwać, skanować i powiększać wszystkie warstwy w czasie danej klatki, a także informacje o przyczynach utworzenia poszczególnych warstw.

Widok warstw w Narzędziach deweloperskich w Chrome.

W tym widoku możesz śledzić liczbę swoich warstw. Jeśli poświęcasz dużo czasu na komponowanie podczas czynności o znaczeniu krytycznym dla wydajności, takich jak przewijanie czy przejścia (cel powinien wynosić około 4–5 ms), możesz na podstawie tych informacji dowiedzieć się, ile masz warstw i w jakim celu zostały utworzone, a następnie zarządzać ich liczbą w aplikacji.