Paint to proces wypełniania pikseli, które ostatecznie są łączone na ekranie użytkownika. Często jest to najdłużej uruchomione ze wszystkich zadań w potoku i jedno z nich, którego należy unikać, jeśli to możliwe.
Podsumowanie
- Zmiana dowolnej właściwości poza przekształceniami lub przezroczystością zawsze powoduje wywołanie funkcji paint.
- Malowanie jest często najdroższą częścią łańcucha przetwarzania pikseli. Unikaj ich, jeśli to możliwe.
- Zmniejsz obszary malowania dzięki promowaniu warstw i zgodności animacji.
- Użyj narzędzia do profilowania malowania w Narzędziach deweloperskich w Chrome, aby ocenić złożoność i koszty malowania; zmniejsz liczbę wyświetleń.
Jak jest wywoływany układ i malowanie
Jeśli wywołasz układ, zawsze wywołujesz też renderowanie, ponieważ zmiana geometrii dowolnego elementu oznacza, że jego piksele wymagają korekty.
Możesz je także uruchomić, gdy zmienisz właściwości niegeometryczne, takie jak tło, kolor tekstu czy cienie. W takich przypadkach nie będzie potrzebny układ, a przepływ danych 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.
Za pomocą narzędzi programistycznych w Chrome możesz szybko zidentyfikować obszary, które są wypełniane. Otwórz kartę Renderowanie, a potem włącz Błyski.
Gdy ta opcja jest włączona, Chrome będzie migać na zielono, gdy tylko nastąpi malowanie. 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ę w ramach pojedynczego obrazu w pamięci. W razie potrzeby przeglądarka może rysować na wielu obrazach lub warstwach 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. Jest to takie samo jak w przypadku pakietów graficznych, takich jak Sketch, GIMP czy Photoshop, gdzie poszczególne warstwy można przetwarzać i łączyć nawzajem, aby utworzyć obraz końcowy.
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;
}
Należy jednak uważać, aby nie tworzyć zbyt wielu warstw, ponieważ każda z nich wymaga pamięci 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ść malowania
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 obrazó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 zawsze unikaj stosowania funkcji paint podczas animacji, ponieważ 10 ms na kadr zwykle nie wystarcza na wykonanie tej operacji, zwłaszcza na urządzeniach mobilnych.