Niektóre animacje na stronach internetowych mogą być w pełni obsługiwane na etapie kompozytora w pipeline’ie renderowania.
Nieskomponowane animacje wymagają więcej pracy i mogą działać niepłynnie na słabszych telefonach lub gdy w wątku głównym są wykonywane zadania wymagające dużej mocy obliczeniowej.
Nieskomponowane animacje mogą też zwiększać zbiorcze przesunięcie układu (CLS) na stronie, ponieważ powodują rzeczywiste przesunięcie elementów, które mierzy algorytm CLS, co może powodować przesunięcia innych elementów. Skomponowane animacje nie powodują przesuwania innych elementów, dlatego są wyłączone z obliczeń CLS. Zmniejszenie CLS poprawi wynik wydajności Lighthouse.
Tło
Algorytmy przeglądarki służące do konwertowania kodu HTML, CSS i JavaScriptu na piksele są zbiorczo nazywane przetwarzaniem w tle.
Nie musisz rozumieć znaczenia poszczególnych kroków łańcucha renderowania. Najważniejsze jest teraz zrozumienie, że na każdym etapie procesu renderowania przeglądarka używa wyniku poprzedniej operacji do tworzenia nowych danych. Jeśli na przykład Twój kod wykonuje coś, co powoduje wywołanie funkcji Layout, etapy Paint i Composite muszą zostać ponownie wykonane. Niezłożona animacja to każda animacja, która uruchamia jeden z wcześniejszych kroków w pipeline renderowania (Style, Layout lub Paint). Nieskomponowane animacje działają gorzej, ponieważ wymagają od przeglądarki większego nakładu pracy.
Aby dowiedzieć się więcej o potoku renderowania, zapoznaj się z tymi materiałami:
- Wgląd we współczesne przeglądarki internetowe (część 3)
- Upraszczanie złożoności i redukowanie obszarów wypełnień
- Używaj tylko właściwości kompozytora i zarządzaj liczbą warstw
Jak Lighthouse wykrywa nieskompilowane animacje
Jeśli animacji nie można złożyć, Chrome zgłasza przyczyny niepowodzenia do śledzenia w Narzędziach dla programistów, które są odczytywane przez Lighthouse. Lighthouse podaje węzły DOM, które zawierają animacje, które nie zostały złożone, wraz z przyczynami niepowodzenia poszczególnych animacji.
Jak sprawdzić, czy animacje są złożone
Zapoznaj się z artykułami Trzymaj się właściwości tylko dla kompozytora i zarządzaj liczbą warstw oraz Wysoko wydajne animacje.