Paint to proces wypełniania pikseli, które ostatecznie zostaną złożone na ekranie użytkownika. Jest to często najdłużej trwające zadanie w pipeline, którego należy unikać, jeśli to możliwe.
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. Unikaj ich, jeśli to 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; w miarę możliwości.
Sposób wyzwalania układu i renderowania
Jeśli wywołasz układ, zawsze wywołujesz też renderowanie, ponieważ zmiana geometrii dowolnego elementu oznacza, że jego piksele wymagają korekty.
Możesz też wywołać malowanie, jeśli zmienisz właściwości niegeometryczne, takie jak tło, kolor tekstu lub cienie. W takich przypadkach nie będzie potrzebny układ, a przepływ danych będzie wyglądać tak:
Szybkie znajdowanie wąskich gardeł związanych z renderowaniem za pomocą Narzędzi deweloperskich w Chrome
Za pomocą narzędzi programistycznych w Chrome możesz szybko zidentyfikować obszary, które są wypełniane. 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.
promowanie elementów, które się poruszają lub znikają;
Malowanie nie zawsze odbywa się jako pojedynczy obraz w pamięci. W rzeczywistości przeglądarka może w razie potrzeby nakładać się na wiele obrazów lub warstw kompozytora.
Zaletą tego podejścia jest to, że elementy, które są regularnie odświeżane lub przekształcane na ekranie, mogą być obsługiwane 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, która jest dostępna we wszystkich popularnych wyszukiwarkach. Użycie wartości transform, will-change spowoduje utworzenie nowej warstwy kompozytora:
.moving-element {
will-change: transform;
}
Zachowaj jednak ostrożność, aby nie utworzyć zbyt wielu warstw, ponieważ każda warstwa wymaga zarówno pamięci, jak i zarządzania. Więcej informacji znajdziesz w sekcji Trzymaj się właściwości tylko dla kompozytora i zarządzaj liczbą warstw.
Jeśli element został przeniesiony do nowej warstwy, użyj DevTools, aby sprawdzić, czy to przyniosło poprawę wydajności. Nie promuj elementów bez profilowania.
Zmniejsz obszary malowania
Czasami jednak, mimo elementów promujących, 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 na górze strony stały nagłówek, a coś jest malowane na dole ekranu, może się okazać, że cały ekran zostanie ponownie namalowany.
Zmniejszenie obszarów malowania polega często na tak skoordynowaniu animacji i przejść, aby nie nakładały się na siebie, lub na znalezieniu sposobu na uniknięcie animowania niektórych części strony.
Uprość złożoność renderowania
Jeśli chodzi o malowanie, niektóre rzeczy są droższe niż inne. Na przykład wszystko, co wymaga rozmycie (np. cień), będzie wymagać więcej czasu na namalowanie niż narysowanie czerwonego kwadratu. W przypadku kodu CSS nie jest to jednak zawsze oczywiste: background: red; i box-shadow: 0, 4px, 4px, rgba(0,0,0,0.5); niekoniecznie wyglądają na elementy o bardzo różnych parametrach wydajności, ale tak jest w rzeczywistości.
Jak widać na poprzednim zrzucie ekranu, narzędzie do profilowania kolorów pozwala określić, czy trzeba wypróbować inne sposoby na uzyskanie efektów. Zastanów się, czy nie można użyć tańszego zestawu stylów lub alternatywnego sposobu osiągnięcia pożądanego efektu.
W miarę możliwości należy unikać stosowania funkcji paint podczas animacji, ponieważ 10 ms na kadr zwykle nie wystarcza na wykonanie tej operacji, zwłaszcza na urządzeniach mobilnych.