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

Komponowanie to połączenie malowanych części strony, które można wyświetlić na ekranie.

Komponowanie to proces, w którym malowane części strony są łączone, aby można było je wyświetlić na ekranie.

Wydajność strony zależy od dwóch kluczowych czynników w tym obszarze: liczby warstw kompozytora, którymi mają być zarządzane oraz właściwości animacji.

Podsumowanie

  • Trzymaj się przekształcania i zmieniaj przezroczystość animacji.
  • Promuj ruchome elementy za pomocą will-change lub translateZ.
  • Unikaj nadużywania reguł promocji – warstwy wymagają pamięci i zarządzania.

Używanie zmian przekształcenia i przezroczystości w animacjach

Najlepsza wersja potoku piksela nie wymaga zarówno układu, jak i renderowania, i wymaga tylko komponowania zmian:

Potok piksela bez układu i renderowania.

Aby to osiągnąć, musisz zmieniać właściwości, które mogą być obsługiwane tylko przez kompozytor. Obecnie prawdziwe są tylko 2 właściwości – transforms i opacity:

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

W przypadku korzystania z komponentów transform i opacity element, w którym zmieniasz te właściwości, powinien znajdować się w własnej warstwie kompozytora. Aby utworzyć warstwę, musisz promować element, który omówimy w następnej kolejności.

Promuj elementy, które planujesz animować

Jak wspomnieliśmy w sekcji „Uproszczenie złożoności malowania i zmniejszenie ilości malowanych obszarów”, elementy, które zamierzasz animować (nie przesadzaj z rozważeniem), umieść we własnej warstwie:

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

W przypadku starszych przeglądarek lub tych, które nie obsługują tej funkcji, zmieni się:

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

Zarządzanie warstwami i unikanie ich wybuchu

Być może kuszące może być, pamiętając, że warstwy często poprawiają skuteczność, by promować wszystkie elementy strony 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, co nie jest bezpłatne. Na urządzeniach z ograniczoną ilością pamięci wpływ na wydajność może znacznie przeważyć nad korzyściami z tworzenia warstwy. Tekstury każdej warstwy muszą być przesłane do GPU, co powoduje dalsze ograniczenia przepustowości między procesorem a GPU oraz ilością pamięci dostępnej dla tekstur w GPU.

Poznaj warstwy w swojej aplikacji za pomocą Narzędzi deweloperskich w Chrome

Przełącznik programu profilującego malowania w Narzędziach deweloperskich w Chrome.

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

Po włączeniu tej funkcji trzeba będzie rozpocząć nagrywanie. Po zakończeniu nagrywania możesz klikać poszczególne klatki, które znajdują się między słupkami liczby klatek na sekundę a informacjami:

Ramka, którą deweloper chce profilować.

Gdy go klikniesz, w szczegółach zobaczysz nową opcję: kartę warstwy.

Przycisk karty warstwy w Narzędziach deweloperskich w Chrome.

Otworzy się nowy widok, który pozwala przesuwać, skanować i powiększać wszystkie warstwy w danej ramce wraz z informacjami o powodach utworzenia poszczególnych warstw.

Widok warstw w Narzędziach deweloperskich w Chrome.

Korzystając z tego widoku, możesz śledzić liczbę posiadanych warstw. Jeśli poświęcasz dużo czasu na komponowanie działań, które mają kluczowe znaczenie dla wydajności, takich jak przewijanie lub przejścia, czas oczekiwania powinien wynosić około 4–5 ms. Dzięki tym informacjom możesz sprawdzić, ile masz warstw, dlaczego zostały one utworzone i na tej podstawie zarządzać liczbą warstw w aplikacji.