Panel osi czasu w Narzędziach deweloperskich zawsze był najlepszym pierwszym przystankiem na ścieżce do optymalizacji wydajności. Ten scentralizowany przegląd aktywności w aplikacji ułatwia analizowanie, które miejsca poświęcają czas na wczytywanie, tworzenie skryptów, renderowanie i malowanie. Niedawno ulepszyliśmy Oś czasu, dodając więcej narzędzi, dzięki czemu możesz uzyskać szczegółowy wgląd w wydajność aplikacji.
Dodaliśmy te funkcje:
- zintegrowany program profilujący JavaScript. (Dołączony wykres flamen!)
- przeglądarka ramek, która umożliwia wizualizację skomponowanych warstw.
- paint profiler, aby uzyskać szczegółowe informacje na temat operacji renderowania w przeglądarce.
Pamiętaj, że korzystanie z opcji przechwytywania Paint opisanych w tym artykule niesie ze sobą pewne ograniczenia wydajności, więc włącz je tylko wtedy, gdy tego potrzebujesz.
Zintegrowany program profilujący JavaScript
Jeśli zdarzyło Ci się przejrzeć panel Profile, prawdopodobnie znasz narzędzie do profilowania procesora JavaScript. To narzędzie mierzy czas wykonywania funkcji JavaScript. Przeglądając profile JavaScript na wykresie płomieniowym, możesz wizualizować przetwarzanie JavaScriptu w czasie.
Szczegółowe informacje o wykonaniu JavaScriptu znajdziesz teraz w panelu Oś czasu. Po wybraniu opcji przechwytywania JS Profiler możesz zobaczyć stosy wywołań JavaScriptu na osi czasu wraz z innymi zdarzeniami w przeglądarce. Dodanie tej funkcji do osi czasu pomaga uprościć procedurę debugowania. Co więcej, pozwala także wyświetlać kod JavaScript w kontekście i identyfikować te części, które wpływają na czas wczytywania i renderowanie strony.
Oprócz programu profilującego JavaScript zintegrowaliśmy z panelu Oś czasu widok wykresu płomieniowego. Aktywność w aplikacji możesz teraz wyświetlać jako klasyczną kaskadę zdarzeń lub wykres płomieni. Ikona wykresu płomieniowego umożliwia przełączanie się między tymi dwoma widokami.
Wyświetlający ramki
Komponowanie warstw to kolejny aspekt przeglądarki, który w większości przypadków ukryty dla programistów. Oszczędne i ostrożne używanie warstw pomaga uniknąć kosztownych ponownych farb i pozwala uzyskać ogromny wzrost wydajności. Często jednak trudno przewidzieć, jak przeglądarka zmieści zawartość. Nowa opcja przechwytywania ekranu Paint na osi czasu pozwala wizualizować skomponowane warstwy w każdej klatce nagrania.
Gdy wybierzesz szarą ramkę nad obszarem Wątek główny, w jego panelu Warstwy zobaczysz model warstw tworzących aplikację.
Możesz powiększać, obracać i przeciągać model warstw, by poznać jego zawartość. Najedź kursorem na warstwę, aby odsłonić jej aktualną pozycję na stronie. Kliknięcie warstwy prawym przyciskiem myszy pozwala przejść do odpowiedniego węzła w panelu Elementy. Te funkcje pokazują, co przeniosło się do warstwy. Jeśli wybierzesz warstwę, możesz też sprawdzić, dlaczego została ona promowana w wierszu Przyczyny utworzenia.
Program profilujący renderowanie
Ponadto dodaliśmy program profilujący farby, aby pomóc w identyfikowaniu zacięć spowodowanych przez drogie farby. Ta funkcja wzbogaca oś czasu o więcej szczegółów na temat pracy Chrome podczas zdarzeń renderowania.
Przede wszystkim łatwiej jest teraz identyfikować treści wizualne związane z każdym zdarzeniem wyrenderowania. Gdy wybierzesz na osi czasu zdarzenie zielonego farby, w okienku Szczegóły pojawi się podgląd faktycznie namalowanych pikseli.
Jeśli chcesz mieć dostęp do szczegółowych informacji, przełącz się do panelu Program profilujący farby. Ten program profilujący pokazuje dokładne polecenia rysowania, które przeglądarka wykonała w przypadku wybranego renderowania. Aby łatwiej połączyć te polecenia natywne z rzeczywistą zawartością aplikacji, możesz kliknąć prawym przyciskiem myszy wywołanie draw* i przejść bezpośrednio do odpowiedniego węzła w panelu Elementy.
Minioś czasu u góry panelu pozwala odtworzyć proces malowania i sprawdzić, które operacje są kosztowne dla przeglądarki. Operacje rysowania są oznaczone tymi kolorami: różowy (kształty), niebieski (mapa bitowa), zielony (tekst) i fioletowy (różne). Wysokość słupka wskazuje czas trwania połączenia, więc analiza wysokich słupków może pomóc zrozumieć, co w przypadku konkretnej farby było kosztowne.
Profil i zysk
Jeśli chodzi o optymalizację wydajności, wiedza o przeglądarce może być niezwykle pomocna. Te aktualizacje osi czasu pozwalają Ci przyjrzeć się bliżej temu procesowi. Aktualizacje osi czasu wyjaśniają zależności między Twoim kodem a procesami renderowania Chrome. Wypróbuj te nowe opcje na osi czasu i zobacz, jak Narzędzia deweloperskie w Chrome mogą usprawnić Ci pracę.