Tryb malowania ciągłego do profilowania malowania jest teraz dostępny w Chrome Canary. Z tego artykułu dowiesz się, jak zidentyfikować problem związany z czasem renderowania strony i jak możesz wykorzystać to nowe narzędzie do wykrywania wąskich gardeł w wydajności renderowania.
Badanie czasu malowania na stronie
Zauważyliśmy więc, że Twoja strona nie przewija się płynnie. W ten sposób należy rozwiązać problem. W tym przykładzie użyjemy strony demonstracyjnej Things We Left On The Moon autorstwa Dana Cederholma.
Otwierasz Inspektora sieci, rozpoczynasz nagrywanie na osi czasu i przewijasz stronę w górę lub w dół. Następnie spoglądasz na pionowe osie czasu, które pokazują, co wydarzyło się w każdej z klatek.
Jeśli większość czasu spędzasz na malowaniu (duże zielone paski powyżej 60 kl./s), musisz dokładniej przyjrzeć się, dlaczego tak się dzieje. Aby sprawdzić farby, użyj ustawienia Pokaż prostokąty wyrenderowania w Inspektorze sieci (ikona koła zębatego w prawym dolnym rogu Inspektora sieci). Pokażą się 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 JavaScript, co powoduje, że Chrome ponownie oblicza układ strony.
- Wyświetlane są animacje, które są aktualizowane w cyklu opartym na klatkach.
- Interakcja użytkownika, np. najechanie kursorem, powoduje zmianę stylu niektórych elementów.
- Każda inna operacja, która powoduje zmianę układu strony.
Jako programista musisz zdawać sobie sprawę z przemalowań na stronie.
Można to robić, oglądając prostokąty malowania. Na przykładowym zrzucie ekranu powyżej widać, że cały ekran jest zakryty dużym prostokątem z farbą. Oznacza to, że podczas przewijania cały ekran jest malowany, co nie jest dobre. W tym konkretnym przypadku powodem jest styl CSS background-attachment:fixed, który powoduje, że obraz tła strony pozostaje w tej samej pozycji, gdy treść strony przesuwa się nad nią podczas przewijania.
Jeśli stwierdzisz, że odświeżanie obejmuje duży obszar lub trwa zbyt długo, masz 2 możliwości:
- Możesz spróbować zmienić układ strony, aby zmniejszyć ilość malowanego obrazu. Jeśli to możliwe, Chrome maluje widoczną stronę tylko raz i dodaje elementy, które nie są widoczne podczas przewijania w dół. Zdarzają się jednak sytuacje, w których Chrome musi ponownie pomalować 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 miejscu, może spowodować ponowne wyrenderowanie treści. - Jeśli chcesz zachować układ strony, możesz spróbować obniżyć koszt malowania obszarów, które są pomalowane ponownie. Nie każdy styl CSS ma taki sam koszt malowania, niektóre mają niewielki wpływ, a inne – dużo. Ustalenie kosztów malowania w różnych stylach może być pracochłonne. Możesz to zrobić, przełączając style w panelu Elementy i sprawdzając różnicę w rejestrowaniu osi czasu, co oznacza przełączanie się między panelami i rejestrowanie wielu różnych danych. W tym przypadku włącza się tryb ciągłego malowania.
Tryb ciągłego malowania
Tryb malowania ciągłego to narzędzie pomocne w sprawdzaniu, które elementy na stronie są kosztowne. Strona jest zawsze malowana, a licznik pokazuje, jak dużo pracy zostało malowanych. Następnie możesz ukrywać elementy i zmieniać style, obserwując licznik, aby ustalić, co działa wolno.
Konfiguracja
Aby używać trybu ciągłego malowania, musisz używać Chrome Canary.
W systemach Linux (i niektórych Macach) musisz upewnić się, że Chrome działa w trybie komponowania. Można to trwale włączyć przy użyciu ustawienia Komponowanie GPU na wszystkich stronach w narzędziu about:flags.
Od czego zacząć
Tryb ciągłego malowania można włączyć, zaznaczając pole wyboru Włącz ciągłe ponowne malowanie 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 zmierzony czas renderowania w milisekundach. Dokładniej mówiąc, widać tu:
- Ostatni zmierzony czas renderowania po lewej stronie.
- Minimalny i maksymalny wykres po prawej stronie.
- Wykres słupkowy pokazujący historię ostatnich 80 klatek na dole (linia na wykresie wskazuje 16 ms jako punkt odniesienia).
Pomiary czasu renderowania zależą od rozdzielczości ekranu, rozmiaru okna i sprzętu, na którym działa Chrome. Pamiętaj, że użytkownicy mogą mieć różne rzeczy.
Przepływ pracy
Oto jak możesz korzystać z trybu ciągłego malowania, aby wyśledzić elementy i style, które wiążą się z dużymi kosztami malowania:
- Otwórz ustawienia Inspektora sieci i zaznacz Włącz ciągłe ponowne renderowanie stron.
- Otwórz panel Elementy i przechodź po drzewie DOM, używając klawiszy strzałek lub wybierając elementy na stronie.
- Za pomocą skrótu klawiszowego H – niedawno wprowadzonego pomocnika możesz przełączać widoczność elementu.
- Spójrz na wykres czasu malowania i spróbuj zidentyfikować element, który wydłuża czas malowania.
- Przejrzyj style CSS tego elementu i włącz je lub wyłącz podczas patrzenia na wykres, aby znaleźć styl, który powoduje spowolnienie.
- Zmień ten styl i zanotuj jeszcze raz oś czasu, aby sprawdzić, czy dzięki temu poprawiło się wyniki Twojej strony.
Animacja poniżej pokazuje przełączanie stylów i jej 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 malowania. Użycie właściwości box-shadow i border-radius w elemencie prowadzi do bardzo kosztownych operacji malowania, ponieważ Chrome nie może w tym celu prowadzić optymalizacji. Jeśli Twój element jest często odświeżany, tak jak w tym przykładzie, unikaj tej kombinacji.
Notatki
Tryb ciągłego malowania ponownie maluje całą widoczną stronę. Zwykle nie dzieje się tak podczas przeglądania stron internetowych. Przewijanie zazwyczaj maluje tylko te części, które nie były wcześniej widoczne. W przypadku innych zmian na stronie odnawiany jest tylko najmniejszy możliwy obszar. Sprawdź więc przy kolejnym nagraniu osi czasu, czy zmiany stylu wpłynęły na czas wyrenderowania strony.
Korzystając z narzędzia continuous painting mode, można zauważyć, że np. style CSS border-radius i box-shadow poświęcają dużo czasu na malowanie. Ogólnie nie odradzamy korzystania z tych funkcji – są naprawdę świetne i cieszymy się, że w końcu są dostępne. Ważne jest jednak, aby wiedzieć, kiedy i gdzie z nich korzystać.
Unikaj używania ich w obszarach, które są często odświeżane, i ogólnie unikaj nadużywania.
Prezentacja na żywo
Kliknij poniżej, aby zobaczyć, jak Paul Ireland używa ciągłego malowania, aby zidentyfikować wyjątkowo drogie proces malowania.