Renderowanie to proces uzupełniania pikseli, które ostatecznie są skomponowane z danymi ekrany. Często jest to najdłużej uruchomione zadanie w potoku i w miarę możliwości należy go unikać.
Barwiony to proces wypełniania pikseli, które z czasem są skomponowane użytkowników ekrany. Często jest to najdłużej uruchomione spośród wszystkich zadań w i drugiego, którego należy unikać.
Podsumowanie
- Zmiana dowolnej właściwości poza przekształceniami i przezroczystością zawsze powoduje wyrenderowanie obrazu.
- Renderowanie to często najdroższa część potoku pikseli. jak to tylko możliwe.
- Zmniejsz wyrenderowane obszary przez promowanie warstw i administrowanie animacjami.
- użyć narzędzia do profilowania malowania w Narzędziach deweloperskich w Chrome, aby ocenić złożoność i koszty malowania; i ograniczaj ich liczbę.
Aktywowanie układu i farby
Jeśli uruchomisz układ, zawsze wywołasz wyrenderowanie, ponieważ zmiana geometrii dowolnego elementu oznacza, że trzeba naprawić jego piksele.
Możesz je także uruchomić, gdy zmienisz właściwości niegeometryczne, takie jak tło, kolor tekstu czy cienie. W takich przypadkach układ nie jest potrzebny, a potok będzie wyglądać tak:
Korzystaj z Narzędzi deweloperskich w Chrome, aby szybko zidentyfikować wąskie gardła w przypadku wąskiego gardła.
Przy użyciu Narzędzi deweloperskich w Chrome możesz szybko zidentyfikować obszary, które są malowane. Otwórz kartę Renderowanie a następnie Miganie farby.
Gdy ta opcja jest włączona, po każdym malowaniu Chrome będzie migać na zielono. Jeśli cały ekran miga na zielono lub te obszary, które według Ciebie nie powinny być pomalowane, połóż się trochę dalej.
Promuj ruchome lub zanikające elementy
Malowanie nie zawsze odbywa się jako pojedynczy obraz w pamięci. W rzeczywistości przeglądarka może w razie potrzeby nakładać obrazy na wiele obrazów lub warstw kompozytora.
Zaletą tego podejścia jest to, że z elementami, które są regularnie odświeżane lub są ruchome na ekranie z przekształceniami, można obchodzić się bez wpływu na inne elementy. Działa to tak samo jak w przypadku pakietów graficznych, takich jak Sketch, GIMP czy Photoshop, gdzie poszczególne warstwy można nakładać na siebie i na siebie nakładać, aby uzyskać końcowy obraz.
Najlepszym sposobem utworzenia nowej warstwy jest użycie właściwości CSS will-change. Będzie to działać w przeglądarkach Chrome, Opera i Firefox, a przy wartości transform utworzy nową warstwę kompozytora:
.moving-element {
will-change: transform;
}
W przypadku przeglądarek, które nie obsługują interfejsu will-change, ale korzystają z tworzenia warstw (np. Safari lub Mobile Safari), musisz użyć przekształcenia 3D, aby wymusić nową warstwę:
.moving-element {
transform: translateZ(0);
}
Zachowaj jednak ostrożność, by nie utworzyć zbyt wielu warstw, ponieważ każda warstwa wymaga zarówno pamięci, jak i zarządzania. Więcej informacji na ten temat znajdziesz w sekcji Zachowaj właściwości tylko z kompozytorem i zarządzaj liczbą warstw.
Jeśli przeniesiesz element do nowej warstwy, użyj Narzędzi deweloperskich, aby sprawdzić, czy to rozwiązanie zwiększa wydajność. Nie promuj elementów, które nie są profilowane.
Zmniejsz malowane obszary
Czasami jednak pomimo promowania elementów konieczne jest malowanie. Duże problemy związane z malowaniem polegają na tym, że przeglądarki łączą ze sobą 2 obszary wymagające malowania, co może prowadzić do ponownego wymalowania całego ekranu. Jeśli na przykład masz stały nagłówek u góry strony, a jakiś element jest malowany u dołu ekranu, cały ekran może zostać pomalowany od nowa.
Zmniejszenie wyrenderowanych obszarów jest często wynikiem zorganizowania animacji i przejść, by nie nakładały się na siebie, lub znalezienie sposobów na uniknięcie animowania określonych części strony.
Uprość złożoność renderowania
Niektóre rzeczy z malarstwa są droższe niż inne. Na przykład malowanie czegoś, co zawiera rozmycie (np. cień), trwa dłużej niż narysowanie czerwonej ramki. W przypadku CSS nie zawsze jest to oczywiste: background: red; i box-shadow: 0, 4px, 4px, rgba(0,0,0,0.5); niekoniecznie muszą wyglądać na zupełnie różne charakterystyki wydajności, ale tak są.
Powyższy program do profilowania farby pozwoli Ci określić, czy trzeba wypróbować inne sposoby na uzyskanie efektów. Zastanów się, czy można użyć tańszego zestawu stylów lub alternatywnych sposobów, aby osiągnąć efekt końcowy.
Warto unikać wyrenderowania, zwłaszcza podczas animacji, ponieważ 10 ms na klatkę zwykle nie wystarcza na wyrenderowanie treści, zwłaszcza na urządzeniach mobilnych.