Paint to proces wypełniania pikseli, które po pewnym czasie nakładają się na ekrany użytkowników. Jest to często najdłuższe wykonywanie wszystkich zadań w potoku i należy go unikać, jeśli to możliwe.
Paint to proces wypełniania pikseli, które po pewnym czasie nakładają się na ekrany użytkowników. Jest to często najdłuższe wykonywanie wszystkich zadań w potoku i których należy unikać, jeśli to możliwe.
Podsumowanie
- Zmiana dowolnej właściwości (z wyjątkiem przekształceń i przezroczystości) zawsze powoduje wyrenderowanie.
- Paint jest często najdroższym elementem potoku pikseli. Unikaj go tam, gdzie to możliwe.
- Ogranicz malowane obszary dzięki promocji warstw i administracji animacji.
- Użyj programu profilującego malowania w Narzędziach deweloperskich w Chrome, aby ocenić złożoność i koszty renderowania.
Aktywowanie układu i renderowania
Jeśli uruchomisz układ, zawsze będzie powodować wyrenderowanie, ponieważ zmiana geometrii dowolnego elementu oznacza, że trzeba poprawić jego piksele.
Renderowanie możesz też uruchomić, gdy zmienisz właściwości niegeometryczne, np. tło, kolor tekstu lub cienie. W takich przypadkach układ nie będzie potrzebny, a potok będzie wyglądać tak:
Szybkie wykrywanie wąskich gardła farb za pomocą Narzędzi deweloperskich w Chrome
Za pomocą Narzędzi deweloperskich w Chrome możesz szybko zidentyfikować malowane obszary. Otwórz kartę Renderowanie i włącz funkcję Paint Flash.
Po włączeniu tej opcji Chrome mignie na zielono ekran za każdym razem, gdy będzie malowane. Jeśli cały ekran miga na zielono lub obszary, które według Ciebie nie powinny być malowane, musisz przyjrzeć się dokładniej.
Promuj elementy, które poruszają się lub zanikają
Obraz nie zawsze jest jednym obrazem w pamięci. W razie potrzeby przeglądarka może malować w wielu obrazach lub warstwach kompozytora.
Zaletą tego podejścia jest to, że elementy, które są regularnie malowane lub które pojawiają się na ekranie z przekształceniami, można obsługiwać bez wpływu na pozostałe. Działa to tak samo jak w przypadku pakietów artystycznych, takich jak Sketch, GIMP czy Photoshop, w których poszczególne warstwy są przetwarzane i łączone ze sobą w celu utworzenia ostatecznego obrazu.
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 spowoduje utworzenie nowej warstwy kompozytora:
.moving-element {
will-change: transform;
}
W przeglądarkach, które nie obsługują will-change, ale korzystają z tworzenia warstwy, np. Safari i Mobile Safari, musisz użyć przekształcenia 3D, aby wymusić utworzenie nowej warstwy:
.moving-element {
transform: translateZ(0);
}
Pamiętaj, aby nie tworzyć zbyt wielu warstw, ponieważ każda z nich wymaga zarówno pamięci, jak i zarządzania. Więcej informacji na ten temat znajdziesz w sekcji Zachowaj właściwości tylko kompozytora i zarządzaj liczbą warstw.
Jeśli przenosisz element do nowej warstwy, użyj Narzędzi deweloperskich, aby sprawdzić, czy zwiększyło to wydajność. Nie promuj elementów bez profilowania.
Ogranicz obszary malowane
Czasami jednak, pomimo elementów promocyjnych, konieczne jest malowanie. Duże problemy z wyświetlaniem obrazu polegają na tym, że przeglądarki łączą ze sobą 2 obszary wymagające malowania, co może prowadzić do malowania całego ekranu. Jeśli na przykład masz stały nagłówek u góry strony, a coś malowanego u dołu ekranu, może się okazać, że malowany jest cały ekran.
Zmniejszenie liczby wyświetlanych obszarów jest często związane z koordynowaniem animacji i przejścia, tak aby nie nakładały się w większym stopniu, lub znalezieniem sposobów na uniknięcie animowania określonych części strony.
Uprość malowanie
Niektóre usługi malarskie są droższe od innych. Na przykład malowanie czegoś, co zawiera rozmycie (np. cienia), trwa dłużej niż rysowanie czerwonego prostokąta. W przypadku usług porównywania cen nie zawsze jest to oczywiste. Elementy background: red; i box-shadow: 0, 4px, 4px, rgba(0,0,0,0.5); niekoniecznie wyglądają tak, jakby miały bardzo różne cechy skuteczności, ale tak jest.
Powyższy program profilujący farb pozwoli Ci określić, czy trzeba poszukać innych sposobów uzyskania efektów. Zadaj sobie pytanie, czy można użyć tańszego zestawu stylów lub alternatywnych sposobów na osiągnięcie rezultatu.
Możesz zawsze unikać malowania podczas animacji, ponieważ czas 10 ms na klatkę zwykle nie jest wystarczająco długi, aby namalować obraz, zwłaszcza na urządzeniach mobilnych.