Panel Oś czasu w Narzędziach deweloperskich zawsze był najlepszym pierwszym przystankiem na ścieżce optymalizacji skuteczności. Ten scentralizowany przegląd aktywności w aplikacji pomaga analizować czas spędzony na wczytywaniu, pisaniu skryptów, renderowaniu i malowaniu. Niedawno udoskonaliliśmy oś czasu, dodając więcej narzędzi, dzięki czemu możesz uzyskać bardziej szczegółowy wgląd w działanie aplikacji.
Dodaliśmy te funkcje:
- zintegrowanego narzędzia do profilowania JavaScript. (Zawiera wykres płaski!)
- przeglądarki ramek ułatwiającą wizualizację złożonych warstw.
- paint profiler, aby wyświetlić szczegółowe informacje o działaniach związanych z malowaniem w przeglądarce.
Pamiętaj, że korzystanie z opisanych w tym artykule opcji przechwytywania ekranu Paint wiąże się z pewnym ograniczeniem wydajności, więc włączaj je tylko wtedy, gdy tego chcesz.
Zintegrowany program profilujący JavaScript
Jeśli zdarzyło Ci się wcześniej korzystać z panelu Profile, to prawdopodobnie znasz JavaScript CPU Profiler. To narzędzie mierzy czas wykonywania funkcji JavaScriptu. Przeglądając profile JavaScript za pomocą wykresu płomieniowego, możesz wizualizować przetwarzanie JavaScriptu w czasie.
Teraz możesz zobaczyć tak szczegółowe zestawienie wykonania kodu JavaScript w panelu Oś czasu. Po wybraniu opcji przechwytywania JS Profiler możesz zobaczyć stosy wywołań JavaScript na osi czasu wraz z innymi zdarzeniami przeglądarki. Dodanie tej funkcji do osi czasu może usprawnić proces debugowania. Co więcej, pozwala zobaczyć kod JavaScript w kontekście i zidentyfikować części kodu, które wpływają na czas wczytywania i renderowanie strony.
Oprócz narzędzia do profilowania JavaScriptu z panelem Oś czasu zintegrowaliśmy też widok wykresu płomieniowego. Aktywność w aplikacji możesz teraz przeglądać w klasycznej kaskadzie zdarzeń lub na wykresie płomieniowym. Ikona Wykres płomieniowy umożliwia przełączanie się między tymi dwoma widokami.
Wyświetlający Frame
Innym aspektem przeglądarki jest komponowanie warstw, które najczęściej ukrywają przed programistami. Warstwy używane z rozwagą i z rozwagą mogą pomóc uniknąć kosztownego ponownego malowania i uzyskać ogromny wzrost wydajności. Często trudno jest jednak przewidzieć, w jaki sposób przeglądarka zbierze zawartość. Dzięki nowej opcji przechwytywania Paint na osi czasu możesz wizualizować skomponowane warstwy w każdej klatce nagrania.
Gdy zaznaczysz szary pasek ramki nad wątkiem głównym, na jego panelu Warstwy pojawi się wizualny model warstw tworzących aplikację.
Możesz powiększać, obracać i przeciągać model warstw, aby poznawać jego zawartość. Najechanie kursorem na warstwę pokazuje jej bieżącą pozycję na stronie. Kliknięcie warstwy prawym przyciskiem myszy pozwala przeskoczyć do odpowiadającego jej węzła w panelu Elementy. Te funkcje pokazują, co zostało awansowane do warstwy. Jeśli wybierzesz warstwę, możesz też sprawdzić, dlaczego została awansowana, w wierszu Przyczyny tworzenia.
Program profilujący renderowanie
Dodaliśmy też narzędzie do profilowania renderowania, które pomaga wykrywać zarysowania spowodowane przez drogie farby. Ta funkcja wzbogaca oś czasu o bardziej szczegółowe informacje o pracy wykonywanej przez Chrome podczas zdarzeń renderowania.
Przede wszystkim łatwiej jest teraz rozpoznać treści wizualne związane z każdym zdarzeniem wyrenderowania. Gdy wybierzesz na osi czasu zdarzenie zielonego farby, w panelu Szczegóły pojawi się podgląd rzeczywistych pikseli, które zostały wyrenderowane.
Jeśli chcesz dowiedzieć się więcej, przejdź do panelu Paint Profiler. Ten program profilujący pokazuje dokładne polecenia rysowania, które przeglądarka wykonała dla wybranego malowania. Aby łatwiej połączyć te polecenia natywne z rzeczywistą treścią aplikacji, możesz kliknąć prawym przyciskiem myszy wywołanie draw* i przejść bezpośrednio do odpowiedniego węzła w panelu Elementy.
Mała oś czasu u góry panelu pozwala odtworzyć proces malowania i dowiedzieć się, które operacje są kosztowne w przeglądarce. Operacje rysowania mają następujące kolory: różowy (kształty), niebieski (bitmapa), zielony (tekst) i fioletowy (różne). Wysokość słupka wskazuje czas trwania połączenia, więc zbadanie wysokości słupków pomoże Ci zrozumieć, dlaczego dana farba była kosztowna.
Profil i zyski!
Jeśli chodzi o optymalizację wydajności, wiedza na temat przeglądarki może być niezwykle przydatna. Te aktualizacje osi czasu pozwalają lepiej zrozumieć zależność między kodem a procesami renderowania w Chrome. Wypróbuj nowe opcje na osi czasu i przekonaj się, jak za pomocą Narzędzi deweloperskich w Chrome możesz usprawnić swoją pracę.