W Chrome Canary jest teraz dostępny tryb malowania ciągłego do profilowania farby. Z tego artykułu dowiesz się, jak zidentyfikować problem związany z czasem renderowania strony i jak za jego pomocą wykryć wąskie gardła w wydajności malowania.
Sprawdzanie czasu renderowania na stronie
Widzisz, że strona nie przewija się płynnie. W ten sposób można zająć się problemem. W naszym przykładzie użyjemy strony demonstracyjnej Things We Left On The Moon autorstwa Dana Cederholma.
Otwórz Inspektora sieci, uruchom nagrywanie na osi czasu i przewiń stronę w górę i w dół. Następnie przyjrzyj się pionowym osiom czasu, które pokazują, co się wydarzyło w każdej klatce.
Jeśli zauważysz, że większość czasu poświęca na malowanie (duże zielone paski powyżej 60 kl./s), musisz się dokładniej przyjrzeć, dlaczego tak się dzieje. Do zbadania wyrenderowań użyj ustawienia Pokaż prostokąty renderowania w Inspektorze sieci (ikona koła zębatego w prawym dolnym rogu Inspektora sieci). W ten sposób zobaczysz regiony, w których Chrome maluje.
Chrome może ponownie malować obszary strony z różnych powodów:
- Węzły DOM zmieniają się w JavaScripcie, co powoduje, że Chrome ponownie oblicza układ strony.
- Odtwarzane są animacje, które są aktualizowane w kolejności klatek.
- Interakcja użytkownika, np. najechanie kursorem, powoduje zmianę stylu niektórych elementów.
- Wszelkie inne operacje, które powodują zmianę układu strony.
Jako programista musisz wiedzieć, że Twoja strona jest ponownie malowana.
Świetnym sposobem na to jest malowanie prostokątów. Na przykładowym zrzucie ekranu powyżej widać, że cały ekran jest pokryty dużym prostokątem. Oznacza to, że podczas przewijania cały ekran jest malowany, co nie jest dobrym rozwiązaniem. W tym przypadku jest to spowodowane stylem CSS background-attachment:fixed, który powoduje, że obraz tła strony pozostaje w tym samym miejscu, gdy treść strony przesuwa się na jej górze podczas przewijania.
Jeśli zauważysz, że ponowne malowanie obejmuje duży obszar i zajmuje to dużo czasu, masz 2 możliwości:
- Możesz spróbować zmienić układ strony, aby zredukować ilość tekstu. Jeśli to możliwe, Chrome maluje widoczną stronę tylko raz i dodaje części, które są niewidoczne podczas przewijania. Istnieją jednak przypadki, w których Chrome musi ponownie wyrenderować określone obszary. Na przykład reguła CSS
position:fixed, która jest często używana w przypadku elementów nawigacyjnych, które pozostają w tym samym położeniu, może powodować ponowne wyrenderowanie. - Jeśli chcesz zachować układ strony, możesz spróbować obniżyć koszty malowania obszarów, które są ponownie pomalowane. Nie każdy styl CSS ma takie same koszty obrazu; niektóre mają niewielki wpływ, a inne bardzo. Ustalenie kosztów malowania różnych stylów może wymagać dużo pracy. Możesz to zrobić, przełączając style w panelu Elementy i obserwując różnicę w nagraniu na osi czasu, co oznacza przełączanie się między panelami i wykonywanie wielu nagrań. Tutaj wkracza tu do gry tryb ciągłego malowania.
Tryb ciągłego malowania
Tryb malowania ciągłego to narzędzie, które pomaga w wykryciu, które elementy na stronie są kosztowne. Dzięki temu strona ciągle się odwzorowuje, pokazując, ile do tego dochodzi malarstwo. Potem możesz ukrywać elementy i mutować style, obserwując licznik, aby dowiedzieć się, co jest wolne.
Konfiguracja
Aby użyć trybu malowania ciągłego, musisz użyć Chrome Canary.
W systemach Linux (i na niektórych komputerach Mac) upewnij się, że Chrome działa w trybie komponowania. Możesz to trwale włączyć za pomocą ustawienia Komponowanie GPU na wszystkich stronach w about:flags.
Od czego zacząć
Tryb malowania ciągłego możesz włączyć, zaznaczając pole wyboru Włącz ciągłe odświeżanie stron w ustawieniach Inspektora sieci (ikona koła zębatego w prawym dolnym rogu Inspektora sieci).
Mały wyświetlacz w prawym górnym rogu pokazuje mierzony czas renderowania w milisekundach. Mówiąc dokładniej, zawiera ona:
- Ostatni zmierzony czas wyrenderowania po lewej stronie.
- Wartość minimalna i maksymalna na bieżącym wykresie po prawej stronie.
- Wykres słupkowy przedstawiający historię ostatnich 80 klatek na dole (linia na wykresie wskazuje na 16 ms jako punkt odniesienia).
Pomiar czasu renderowania zależy od rozdzielczości ekranu, rozmiaru okna i sprzętu, na którym działa Chrome. Pamiętaj, że w przypadku Twoich użytkowników może to wyglądać inaczej.
Przepływ pracy
Oto jak, korzystając z trybu malowania ciągłego, możesz znaleźć elementy i style, które wymagają dużych kosztów malowania:
- Otwórz ustawienia Inspektora sieci i zaznacz Włącz ciągłe ponowne malowanie stron.
- Przejdź do panelu Elementy i przemierzaj drzewo DOM, korzystając z klawiszy strzałek lub wybierając elementy na stronie.
- Widoczność elementu możesz włączać za pomocą skrótu klawiszowego H, czyli nowo wprowadzonego narzędzia pomocniczego.
- Spójrz na wykres czasu wyrenderowania i spróbuj znaleźć element, który pochłania dużo czasu malowania.
- Przejdź przez style CSS tego elementu, włączając i wyłączając je podczas patrzenia na wykres, aby znaleźć styl, który powoduje spowolnienie.
- Zmień ten styl i ponownie włącz nagrywanie na osi czasu, aby sprawdzić, czy poprawiło to skuteczność strony.
Animacja poniżej pokazuje przełączanie stylów i ich wpływ na czas renderowania:
Ten przykład pokazuje, jak wyłączenie jednego ze stylów CSS box-shadow lub border-radius znacznie skraca czas renderowania. Użycie w elemencie zarówno box-shadow, jak i border-radius umożliwia bardzo kosztowne operacje malarskie, ponieważ Chrome nie może optymalizować pod tym kątem. Jeśli masz element, który jest często odświeżany, jak w przykładzie, unikaj tej kombinacji.
Uwagi
Tryb malowania ciągłego maluje całą widoczną stronę. Zazwyczaj nie dzieje się tak podczas przeglądania stron internetowych. Przewijanie zazwyczaj maluje tylko te części, które wcześniej nie były widoczne. W przypadku innych zmian na stronie ponownie malowany jest tylko najmniejszy możliwy obszar. Sprawdź więc inne nagranie osi czasu, czy poprawki stylu faktycznie wpłynęły na czas renderowania strony.
Podczas używania właściwości continuous painting mode możesz się dowiedzieć, że np. style CSS border-radius i box-shadow pochłaniają dużo czasu malowania. Nie odradzamy używania tych funkcji – są świetne i cieszymy się, że wreszcie są dostępne. Trzeba jednak wiedzieć, kiedy i gdzie można ich używać.
Unikaj używania ich w obszarach z dużą ilością przemalowanych elementów i ogólnie unikaj ich nadmiernego używania.
Prezentacja na żywo
Kliknij poniżej, aby zobaczyć prezentację, w której Paul Irlandzki używa ciągłego malowania, aby poznać wyjątkowo kosztowny proces malowania.