Nieskomponowane animacje mogą wydawać się niezakłócone (nie płynne) na telefonach słabo skomponowanych lub gdy w wątku głównym są wykonywane zadania wymagające dużej mocy obliczeniowej. Nieregularne animacje mogą zwiększyć skumulowane przesunięcie układu (CLS) strony. Zmniejszenie CLS polepszy wynik skuteczności Lighthouse.
Wprowadzenie
Algorytmy przeglądarki do konwertowania kodu HTML, CSS i JavaScriptu na piksele są wspólnie nazywane potokiem renderowania.
Nie szkodzi, że nie rozumiesz, co oznaczają poszczególne kroki potoku renderowania. Najważniejsze jest teraz, aby zrozumieć, że na każdym etapie potoku renderowania przeglądarka używa wyniku poprzedniej operacji do utworzenia nowych danych. Jeśli na przykład kod wykonuje czynność, która wywołuje układ, trzeba będzie wykonać kroki Paint i Kompozyt. Nieskomponowana animacja to każda animacja, która wyzwala jeden z wcześniejszych kroków potoku renderowania (Styl, Układ lub Wyrenderowanie). Nieskomponowane animacje są gorsze, ponieważ wymuszają na przeglądarce więcej zadań.
Aby dowiedzieć się więcej o procesie renderowania, zapoznaj się z tymi materiałami:
- Współczesne przeglądarki w przeglądarce (część 3)
- Uproszczenie złożoności malowania i zmniejszanie liczby malowanych obszarów
- Używaj tylko właściwości kompozytora i zarządzaj liczbą warstw
Jak Lighthouse wykrywa nieskomponowane animacje
Jeśli animacji nie można skomponować, Chrome zgłasza przyczyny niepowodzenia w zrzucie narzędzi dla programistów, który odczytuje Lighthouse. Lighthouse wyświetla listę węzłów DOM, które zawierają animacje, które nie zostały skomponowane, wraz z przyczynami niepowodzenia poszczególnych animacji.
Jak sprawić, żeby animacje były skomponowane
Zapoznaj się z sekcjami Używaj tylko właściwości kompozytora i zarządzanie liczbą warstw oraz animacjami o wysokiej wydajności.