Tryb ciągłego malowania do profilowania malowania jest teraz dostępny w Chrome Canary. Z tego artykułu dowiesz się, jak zidentyfikować problem z czasem tworzenia strony i jak za pomocą tego nowego narzędzia wykryć wąskie gardła w działaniu funkcji tworzenia strony.
Ćwiczenie sprawdzania czasu malowania na Twojej stronie
Zauważyliśmy, że Twoja strona nie przewija się płynnie. W ten sposób możesz zacząć rozwiązywać problem. W tym przykładzie użyjemy strony demonstracyjnej Things We Left On The Moon autorstwa Dan Cederholm.
Otwórz Web Inspector, rozpocznij nagrywanie osi czasu i przewiń stronę w górę i w dół. Następnie możesz przyjrzeć się osi czasu w pionie, która pokazuje, co działo się w każdej klatce.
Jeśli widzisz, że większość czasu jest poświęcana na renderowanie (duże zielone paski powyżej 60 FPS), musisz dokładniej przyjrzeć się przyczynie tego zjawiska. Aby sprawdzić kolory, użyj ustawienia Pokaż prostokąty kolorów w przeglądarce Web Inspector (ikona koła zębatego w prawym dolnym rogu narzędzia Web Inspector). Wyświetli się lista regionów, w których Chrome maluje.
Chrome może ponownie rysować obszary strony z różnych powodów:
- W JavaScript zmieniają się węzły DOM, co powoduje ponowne obliczenie układu strony przez Chrome.
- Odtwarzane są animacje, które są aktualizowane w cyklu zależnym od liczby klatek.
- Interakcje użytkownika, takie jak najeżdżanie kursorem, powodują zmiany stylu niektórych elementów.
- każda inna operacja powodująca zmianę układu strony.
Jako deweloper musisz zwracać uwagę na odświeżanie strony.
Najlepiej to zrobić, patrząc na prostokąty farby. 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 ponownie malowany, co nie jest dobre. W tym konkretnym przypadku jest to spowodowane stylem CSSbackground-attachment:fixed, który sprawia, że obraz tła strony pozostaje w tej samej pozycji, podczas gdy treść strony przesuwa się na jej górę podczas przewijania.
Jeśli stwierdzisz, że ponowne malowanie wymaga dużych nakładów pracy lub zajmuje dużo czasu, masz 2 możliwości:
- Możesz spróbować zmienić układ strony, aby zmniejszyć ilość malowania. Jeśli to możliwe, Chrome wyświetla widoczną stronę tylko raz i dodaje części, które nie były widoczne, gdy przewijasz stronę w dół. Czasami jednak Chrome musi ponownie narysować niektóre obszary. Na przykład reguła CSS
position:fixed, która jest często używana do elementów nawigacji, które pozostają w tej samej pozycji, może powodować takie ponowne renderowanie. - Jeśli chcesz zachować układ strony, możesz spróbować zmniejszyć koszty malowania tych obszarów, które wymagają ponownego pomalowania. Nie każdy styl CSS ma taki sam koszt malowania. Niektóre mają niewielki wpływ, inne duży. Ustalenie kosztów malowania w przypadku niektórych stylów może być bardzo pracochłonne. Aby to zrobić, możesz przełączać style w panelu Elementy i sprawdzać różnice w nagraniu na osi czasu, co oznacza przełączanie się między panelami i wykonywanie wielu nagrań. Właśnie w takich sytuacjach przydaje się tryb ciągłego malowania.
Tryb ciągłego malowania
Tryb ciągłego rysowania to narzędzie, które pomaga zidentyfikować elementy na stronie, które są kosztowne. Spowoduje to, że strona będzie stale się odświeżać, a licznik będzie pokazywać, ile pracy jest wykonywane. Następnie możesz ukrywać elementy i zmieniać style, obserwując przy tym licznik, aby dowiedzieć się, co jest powolne.
Konfiguracja
Aby korzystać z trybu ciągłego rysowania, musisz używać Chrome Canary.
W systemach Linux (i na niektórych komputerach Mac) musisz się upewnić, że Chrome działa w trybie kompozytowania. Możesz to włączyć na stałe, korzystając z ustawienia Kompozycja na karcie graficznej na wszystkich stronach w about:flags.
Jak zacząć
Tryb ciągłego rysowania można włączyć za pomocą pola wyboru Włącz ciągłe odświeżanie strony w ustawieniach Web Inspectora (ikona koła zębatego w prawym dolnym rogu Web Inspectora).
Mały wyświetlacz w prawym górnym rogu pokazuje zmierzone czasy malowania w milisekundach. W szczególności pokazuje:
- Po lewej stronie widać ostatni zmierzony czas renderowania.
- Minimalna i maksymalna wartość bieżącego wykresu po prawej stronie.
- Wykres słupkowy pokazujący u dołu historię ostatnich 80 ramek (linia na wykresie wskazuje 16 ms jako punkt odniesienia).
Pomiary czasu malowania zależą od rozdzielczości ekranu, rozmiaru okna i sprzętu, na którym działa Chrome. Pamiętaj, że te elementy mogą się różnić w przypadku Twoich użytkowników.
Przepływ pracy
Oto jak możesz używać trybu ciągłego malowania, aby śledzić elementy i style, które zwiększają koszty malowania:
- Otwórz ustawienia Web Inspector i zaznacz pole Włącz ciągłe odświeżanie strony.
- Otwórz panel Elementy i przejdź przez drzewo DOM za pomocą klawiszy strzałek lub wybierając elementy na stronie.
- Aby przełączać widoczność elementu, użyj skrótu klawiszowego H, który jest nowo wprowadzonym narzędziem.
- Spójrz na wykres czasu malowania i spróbuj znaleźć element, który wydłuża czas malowania.
- Przejrzyj style CSS tego elementu, włączając je i wyłączając, aby znaleźć styl, który powoduje spowolnienie.
- Zmień ten styl i zrób kolejny zapis Czasowej linii, aby sprawdzić, czy to poprawiło działanie strony.
Animacja poniżej pokazuje przełączanie stylów i jego wpływ na czas malowania:
Ten przykład pokazuje, jak wyłączenie jednego z stylów CSS box-shadow
lub border-radius znacznie skraca czas malowania. Użycie w elemencie zarówno box-shadow, jak i border-radius powoduje bardzo kosztowne operacje malowania, ponieważ Chrome nie może tego zoptymalizować. Jeśli więc masz element, który wymaga wielu ponownych malowań, jak w przykładzie, unikaj tej kombinacji.
Uwagi
Tryb ciągłego renderowania odświeża całą widoczną stronę. Zwykle przeglądanie strony internetowej nie powoduje takich problemów. Przewijanie zwykle powoduje wyświetlanie tylko tych części, które nie były wcześniej widoczne. W przypadku innych zmian na stronie odświeżany jest tylko najmniejszy możliwy obszar. Dlatego sprawdź na podstawie innego nagrania osi czasu, czy ulepszenia stylu rzeczywiście wpłynęły na czasy renderowania strony.
Podczas korzystania z funkcji continuous painting mode możesz zauważyć, że np. style CSS border-radius i box-shadow wydłużają czas malowania. Nie zniechęcamy do korzystania z tych funkcji, które są świetne i bardzo się cieszymy, że w końcu są dostępne. Ważne jest jednak, aby wiedzieć, kiedy i gdzie ich używać.
Unikaj ich używania w miejscach, w których często trzeba je ponownie malować, oraz w ogóle nie nadużywaj ich.
Prezentacja na żywo
Kliknij poniżej, aby obejrzeć demonstrację, w której Paul Irish używa ciągłego malowania do identyfikowania wyjątkowo drogich operacji malowania.