Informacje o funkcjach wydajności

Kayce Basques

Sofia Emelianova

Ta strona zawiera obszerne omówienie funkcji Narzędzi deweloperskich w Chrome związanych z analizą wydajności.

W artykule Analiza wydajności w czasie wykonywania znajdziesz samouczek, który pomoże Ci przeanalizować wydajność strony za pomocą Narzędzi deweloperskich w Chrome.

Rejestrowanie skuteczności

Możesz nagrywać czas wykonywania lub wydajność wczytywania.

Rejestrowanie wydajności w czasie działania

Rejestruj wydajność środowiska wykonawczego, gdy chcesz analizować wydajność strony podczas jej działania, a nie do wczytywania.

1. Wejdź na stronę, którą chcesz przeanalizować.
2. W DevTools kliknij kartę Skuteczność.

3. Kliknij Nagraj .

   

4. Wejdź w interakcję ze stroną. Narzędzia deweloperskie rejestrują całą aktywność na stronie, która występuje w wyniku Twoich interakcji.

5. Jeszcze raz kliknij Nagraj lub Zatrzymaj, aby zakończyć nagrywanie.

Wydajność wczytywania nagrań

Rejestruj wydajność wczytywania, gdy chcesz analizować wydajność strony podczas jej wczytywania, a nie działania.

1. Wejdź na stronę, którą chcesz przeanalizować.
2. Otwórz panel Wydajność w Narzędziach deweloperskich.

3. Kliknij Rozpocznij profilowanie i załaduj ponownie stronę. Narzędzia deweloperskie najpierw przechodzą do about:blank, aby usunąć pozostałe zrzuty ekranu i ślady. Narzędzia deweloperskie rejestrują dane o skuteczności podczas ponownego ładowania strony, a po kilku sekundach automatycznie zatrzymują rejestrowanie.

   

Narzędzia deweloperskie automatycznie powiększają fragment nagrania, w którym miała miejsce większość aktywności.

W tym przykładzie w panelu Skuteczność widać aktywność podczas wczytywania strony.

Robienie zrzutów ekranu podczas nagrywania

Zaznacz pole wyboru Zrzuty ekranu, aby podczas nagrywania robić zrzut ekranu każdej klatki.

Aby dowiedzieć się, jak pracować ze zrzutami ekranu, przeczytaj artykuł Wyświetlanie zrzutu ekranu.

Wymuś czyszczenie pamięci podczas nagrywania

Podczas nagrywania strony kliknij Zbierz śmiecimop, aby wymusić zbieranie śmieci.

Pokaż ustawienia nagrywania

Kliknij Ustawienia przechwytywania , aby wyświetlić więcej ustawień związanych z rejestrowaniem nagrań skuteczności w Narzędziach deweloperskich.

Wyłącz próbki JavaScriptu

Domyślnie ścieżka Główna nagrania wyświetla szczegółowe stosy wywołań funkcji JavaScript, które zostały wywołane podczas nagrywania. Aby wyłączyć te stosy wywołań:

1. Otwórz menu Ustawienia rejestrowania . Zobacz Pokaż ustawienia nagrywania.
2. Zaznacz pole wyboru Wyłącz próbki JavaScript.
3. Wykonaj nagranie strony.

Na poniższych zrzutach ekranu widać różnicę między wyłączeniem a włączeniem próbek JavaScriptu. Główna ścieżka nagrania jest znacznie krótsza, gdy próbkowanie jest wyłączone, ponieważ pomija wszystkie stosy wywołań JavaScript.

Ten przykład pokazuje nagranie z wyłączonymi próbkami JS.

Ten przykład pokazuje nagranie z włączonymi przykładami JS.

Ograniczanie działania sieci podczas nagrywania

Aby ograniczyć wykorzystanie sieci podczas nagrywania:

1. Otwórz menu Ustawienia przechwytywania . Zobacz Pokaż ustawienia nagrywania.
2. Ustaw Sieć na wybrany poziom ograniczania.

Ogranicz procesor podczas nagrywania

Aby ograniczyć wykorzystanie procesora podczas nagrywania:

1. Otwórz menu Ustawienia rejestrowania . Zobacz Pokaż ustawienia nagrywania.
2. Ustaw CPU na wybrany poziom ograniczania.

Ograniczenie jest względne w stosunku do możliwości komputera. Na przykład opcja 2-krotnego spowolnienia powoduje, że procesor działa 2 razy wolniej niż zwykle. Narzędzia dla deweloperów nie mogą dokładnie symulować procesorów urządzeń mobilnych, ponieważ architektura urządzeń mobilnych różni się znacznie od architektury komputerów stacjonarnych i laptopów.

Włącz statystyki selektora arkusza CSS

Aby wyświetlić statystyki selektorów reguł CSS podczas długotrwałych zdarzeń Przelicz styl:

1. Otwórz menu Ustawienia przechwytywania . Zobacz Pokaż ustawienia nagrywania.
2. Zaznacz pole wyboru Włącz statystyki selektora CSS.

Więcej informacji znajdziesz w artykule Analiza wydajności selektora CSS podczas zdarzeń ponownego obliczania stylu.

Włącz zaawansowaną instrumentację renderowania

Aby wyświetlić szczegółową instrumentację renderowania:

1. Otwórz menu Ustawienia rejestrowania . Zobacz Pokaż ustawienia nagrywania.
2. Zaznacz pole wyboru Włącz zaawansowaną instrumentację renderowania.

Aby dowiedzieć się, jak korzystać z informacji o kopiowaniu formatowania, przeczytaj artykuły Wyświetlanie warstw i Wyświetlanie profilu kopiowania formatowania.

Emulowanie równoczesności sprzętu

Aby przetestować wydajność aplikacji przy różnych liczbach rdzeni procesora, możesz skonfigurować wartość zgłaszaną przez właściwość navigator.hardwareConcurrency. Niektóre aplikacje używają tej właściwości do sterowania stopniem równoległości działania, na przykład do kontrolowania rozmiaru puli pthread Emscripten.

Aby emulować równoczesność sprzętową:

1. Otwórz menu Ustawienia przechwytywania . Zobacz Pokaż ustawienia nagrywania.
2. Zaznacz opcję Sprzętowa równoczesność i ustaw liczbę rdzeni w polu wejściowym.

Na karcie Wydajność w DevTools wyświetla się ikona ostrzeżenia , aby przypomnieć, że włączona jest emulacja współbieżności sprzętowej.

Aby przywrócić domyślną wartość (10), kliknij przycisk Przywróć .

Zapisywanie nagrania

Aby zapisać nagranie, kliknij prawym przyciskiem myszy i wybierz Zapisz profil.

Wczytaj nagranie

Aby wczytać nagranie, kliknij prawym przyciskiem myszy i wybierz Load Profile (Wczytaj profil).

Wyczyść poprzednie nagranie

Po utworzeniu nagrania kliknij Wyczyść nagranie , aby usunąć nagranie z panelu Wydajność.

Analizowanie nagrania dotyczącego wydajności

Gdy zarejestrujesz wydajność w czasie działania aplikacji lub zarejestrujesz wydajność wczytywania, w panelu Skuteczność pojawią się duże ilości danych potrzebnych do analizy wydajności.

Przechodzenie po nagraniu

Aby dokładnie sprawdzić nagranie z wykonywaniem, możesz wybrać część nagrania, przewinąć długi wykres słupkowy, powiększyć lub pomniejszyć widok oraz używać elementów nawigacyjnych, aby przechodzić między poziomami powiększenia.

Wybieranie fragmentu nagrania

Pod paskiem czynności w panelu Skuteczność i u góry nagrania znajduje się sekcja Przegląd osi czasu z wykresami CPU i NET.

Aby wybrać fragment nagrania, kliknij i przytrzymaj, a następnie przeciągnij w lewo lub w prawo na osi czasu.

Aby zaznaczyć fragment za pomocą klawiatury:

1. Skoncentruj się na ścieżce Główna lub na dowolnej ścieżce sąsiedniej.
2. Aby powiększać widok, przesuwać się w lewo, pomniejszać widok i przesuwać się w prawo, użyj odpowiednio klawiszy W, A, S i D.

Aby zaznaczyć fragment za pomocą trackpada:

1. Najedź kursorem na sekcję Przegląd osi czasu lub dowolną ścieżkę (Główna i jej sąsiad).
2. Przesuń dwoma palcami w górę, by pomniejszyć, w lewo, by przesunąć, w dół, by powiększyć, lub w prawo, by przesunąć.

Twórz menu nawigacyjne i przełączaj się między poziomami powiększenia

Przegląd osi czasu umożliwia utworzenie kolejno wielu zagnieżdżonych menu nawigacyjnego, zwiększanie poziomu powiększenia i swobodne przechodzenie między poziomami powiększenia.

Aby utworzyć i użyć informacji o lokalizacji:

1. W sekcji Przegląd osi czasu wybierz fragment nagrania.
2. Najedź kursorem na zaznaczenie i kliknij przycisk N ms zoom_in. Zaznaczenie rozszerza się, aby wypełnić widok osi czasu. Łańcuch menu nawigacyjnego zaczyna się tworzyć u góry Przeglądu osi czasu.
3. Powtórz 2 poprzednie kroki, aby utworzyć kolejną zagnieżdżoną ścieżkę. Możesz nadal zagnieżdżać menu nawigacyjne, jeśli zakres wyboru jest większy niż 5 milisekund.
4. Aby przejść do wybranego poziomu powiększenia, kliknij odpowiedni link na ścieżce breadcrumbs u góry przeglądu osi czasu.

Aby usunąć elementy podrzędne menu nawigacyjnego, kliknij je prawym przyciskiem myszy i wybierz Usuń podrzędne menu nawigacyjne.

Przewijanie długiego wykresu płomieniowego

Aby przewinąć długi wykres płomienny na ścieżce głównej lub sąsiednich, kliknij i przytrzymaj, a następnie przeciągnij w dowolnym kierunku, aż zobaczysz to, czego szukasz.

Aktywności związane z wyszukiwaniem

Możesz wyszukiwać aktywności na ścieżce Główna oraz prośby na ścieżce Sieć.

Aby otworzyć pole wyszukiwania u dołu panelu Skuteczność, naciśnij:

• macOS: Command + F
• Windows, Linux: Control+F

W tym przykładzie w polu wyszukiwania na dole znajduje się wyrażenie regularne, które wyszukuje wszystkie działania zaczynające się od E.

Aby przewijać aktywności pasujące do Twojego zapytania:

• Kliknij przyciski expand_less Wstecz lub expand_more Dalej.
• Naciśnij Shift + Enter, aby wybrać poprzedni element, lub Enter, aby wybrać następną.

W panelu Skuteczność wyświetla się tooltip nad aktywnością wybraną w polu wyszukiwania.

Aby zmodyfikować ustawienia zapytania:

• Kliknij match_case Dopasuj wielkość liter, aby uwzględnić w zapytaniu wielkość liter.
• Aby użyć w zapytaniu wyrażenia regularnego, kliknij regular_expression Wyrażenie regularne.

Aby ukryć pole wyszukiwania, kliknij Anuluj.

Zmienianie kolejności utworów i ukrywanie ich

Aby uporządkować ślad wydajności, możesz zmienić kolejność ścieżek i ukryć te, które nie są istotne, w trybie konfiguracji ścieżki.

Aby przenosić i ukrywać ścieżki:

1. Aby przejść do trybu konfiguracji, kliknij prawym przyciskiem myszy nazwę ścieżki i wybierz Skonfiguruj ścieżki.
2. Aby przesunąć ścieżkę w górę lub w dół, kliknij arrow_upward w górę lub arrow_downward w dół. Kliknij visibility_off, aby ją ukryć.
3. Gdy skończysz, u dołu kliknij Zakończ konfigurowanie ścieżek, aby wyjść z trybu konfiguracji.

Obejrzyj film, by zobaczyć, jak działa ten proces.

Panel Skuteczność zapisuje konfigurację ścieżki na potrzeby nowych logów czasu, ale nie w kolejnych sesjach Narzędzi deweloperskich.

Wyświetl aktywność w wątku głównym

Ścieżka Główny umożliwia wyświetlenie aktywności, która miała miejsce w głównym wątku strony.

Kliknij zdarzenie, aby wyświetlić więcej informacji na jego temat na karcie Podsumowanie. W panelu Skuteczność zaznaczone zdarzenie jest zaznaczone na niebiesko.

W tym przykładzie na karcie Podsumowanie znajdziesz więcej informacji o zdarzeniach wywołania funkcji get.

Interpretowanie wykresu płomieniowego

Panel Skuteczność przedstawia główną aktywność wątku w postaci wykresu płomieni. Oś X przedstawia nagranie w czasie. Oś Y reprezentuje stos wywołania. Zdarzenia u góry odpowiadają za zdarzenia poniżej.

Ten przykład pokazuje wykres płomieni na ścieżce Main. Zdarzenie click spowodowało anonimowe wywołanie funkcji. Ta funkcja z kolei wywołuje funkcję onEndpointClick_, która z kolei wywołuje funkcję handleClick_ i tak dalej.

W panelu Skuteczność skrypty są przypisywane losowymi kolorami, aby rozbić wykres płomieniowy i uczynić go bardziej czytelnym. W poprzednim przykładzie wywołania funkcji z jednego skryptu mają kolor jasnoniebieski. Wywołania z innego skryptu są oznaczone na jasnoróżowo. Ciemniejszy żółty kolor oznacza aktywność związaną ze skryptem, a fioletowy – aktywność związaną z renderowaniem. Te ciemniejsze żółte i fioletowe zdarzenia są takie same we wszystkich nagraniach.

Długie zadania są również wyróżnione czerwonym trójkątem, a część o długości ponad 50 milisekund jest wyszarzona na czerwono:

W tym przykładzie czas trwania zadania przekroczył 400 milisekund, więc część reprezentująca ostatnie 350 milisekund jest zacieniona na czerwono, a początkowe 50 milisekund nie.

Dodatkowo ścieżka Główna zawiera informacje o profilach procesora uruchomionych i zatrzymywanych przez funkcje konsoli profile() i profileEnd().

Aby ukryć szczegółowy wykres słupkowy wywołań JavaScriptu, zapoznaj się z artykułem Wyłączanie próbek JavaScriptu. Gdy próbki JS są wyłączone, widzisz tylko zdarzenia wysokiego poziomu, takie jak Event (click) i Function Call.

Śledzenie inicjatorów zdarzeń

Na ścieżce głównej mogą się pojawiać strzałki łączące te elementy:

• Unieważnienie stylu lub układu -> Ponownie oblicz style lub Układ
• Żądanie klatki animacji -> Uruchomiono klatkę animacji
• Request Idle Callback -> Fire Idle Callback
• Zainstaluj licznik czasu -> Uruchomiono licznik czasu
• Utwórz WebSocket -> Wyślij… i Otrzymaj uzgodnienie połączenia WebSocket lub Zniszcz WebSocket

Aby zobaczyć strzałki, znajdź na wykresie płomieniowym inicjator lub zdarzenie, które wywołało.

Gdy wybierzesz tę opcję, na karcie Podsumowanie będą widoczne linki Inicjator dla dotyczące inicjatorów i Zainicjowane przez dla wywołanych zdarzeń. Klikaj je, aby przechodzić między odpowiednimi wydarzeniami.

Ukrywanie funkcji i ich elementów podrzędnych na wykresie płomienia

Aby uporządkować wykres płomieniowy w wątku głównym, możesz ukryć wybrane funkcje lub ich elementy podrzędne:

1. Na ścieżce Głównej kliknij funkcję prawym przyciskiem myszy i wybierz jedną z tych opcji lub naciśnij odpowiedni skrót:

   • Ukryj funkcję (H)
   • Ukryj podrzędne (C)
   • Ukryj powtarzające się wpisy podrzędne (R)
   • Zresetuj elementy podrzędne (U)
   • Zresetuj ślad (T)
   • Dodaj skrypt do listy ignorowanych (I)

   

   Obok nazwy funkcji z ukrytymi elementami podrzędnymi pojawi się przycisk menu arrow_drop_down.

2. Aby zobaczyć liczbę ukrytych elementów podrzędnych, najedź kursorem na menu arrow_drop_down.

   

3. Aby zresetować funkcję z ukrytymi elementami podrzędnymi lub cały diagram płomienisty, kliknij funkcję i naciśnij U lub kliknij dowolną funkcję prawym przyciskiem myszy i wybierz Zresetuj śledzenie.

Ignoruj skrypty na wykresie płomieniowym

Aby dodać skrypt do listy ignorowanych fragmentów kodu, kliknij skrypt prawym przyciskiem myszy na wykresie i wybierz Dodaj skrypt do listy ignorowanych fragmentów kodu.

Wykres zwija ignorowane skrypty, oznacza je jako Na liście ignorowanych i dodaje do reguł Niestandardowe wykluczenia w sekcji Ustawienia Ustawienia > Lista ignorowanych. Ignorowane skrypty są zapisywane, dopóki nie usuniesz ich ze śledzenia lub z niestandardowych reguł wykluczania.

Wyświetlanie zajęć w tabeli

Po nagraniu strony nie musisz polegać tylko na ścieżce głównej, aby analizować działania. Narzędzia deweloperskie oferują też 3 widoki tabelaryczne do analizowania działań. Każdy widok daje Ci inną perspektywę działań:

• Jeśli chcesz wyświetlić główne działania, które wymagają największego nakładu pracy, użyj karty Drzewo wywołań.
• Aby wyświetlić aktywności, w których spędzasz najwięcej czasu, użyj karty Od dołu.
• Aby wyświetlić działania w kolejności, w jakiej miały miejsce podczas nagrywania, skorzystaj z karty Dziennik zdarzeń.

Aby ułatwić Ci szybsze znajdowanie tego, czego szukasz, wszystkie 3 karty mają przyciski zaawansowanego filtrowania obok paska Filtr:

• match_case Uwzględnia wielkość liter.
• wyrażenie_regularne Wyrażenie regularne.
• match_word Dopasuj do całego słowa.

Każdy widok tabelaryczny w panelu Skuteczność zawiera linki do działań takich jak wywołania funkcji. Aby ułatwić debugowanie, Narzędzia deweloperskie znajdują w plikach źródłowych odpowiednie deklaracje funkcji. Dodatkowo, jeśli odpowiednie mapy źródeł są obecne i włączone, Narzędzia deweloperskie automatycznie znajdą oryginalne pliki.

Kliknij link, aby otworzyć plik źródłowy w panelu Źródła.

Uwaga: wszystkie 3 kolejne sekcje dotyczą tej samej prezentacji. Możesz samodzielnie uruchomić demonstrację na stronie Demo kart aktywności i zapoznać się ze źródłem na stronie GoogleChrome/devtools-samples/perf/activitytabs.html.

Działania na poziomie głównym

Oto wyjaśnienie koncepcji działań głównych omówionych na kartach Drzewo wywołań, Od dołu i Dziennik zdarzeń.

Działania główne to te, które powodują wykonywanie określonych zadań przez przeglądarkę. Jeśli na przykład klikniesz stronę, przeglądarka uruchomi działanie Event jako działanie główne. Ten element Event może spowodować wykonanie modułu obsługi.

Na wykresie płomienistym utworu Główny główne czynności znajdują się u góry wykresu. Na kartach Drzewo wywołań i Dziennik zdarzeń działania główne należą do elementów najwyższego poziomu.

Przykłady działań na poziomie głównego znajdziesz na karcie Drzewo wywołania.

Karta Drzewo połączeń

Na karcie Drzewo połączeń możesz sprawdzić, które podstawowe działania wymagają największego nakładu pracy.

Karta Drzewo połączeń wyświetla tylko działania z wybranego fragmentu nagrania. Aby dowiedzieć się, jak wybrać fragmenty nagrania, zapoznaj się z sekcją Wybieranie fragmentu nagrania.

W tym przykładzie najwyższy poziom elementów w kolumnie Aktywność, np. Event, Paint i Composite Layers, to główne czynności. Zagnieżdżenie reprezentuje stos wywołań. W tym przykładzie Event spowodował Function Call, który spowodował button.addEventListener, który spowodował b itd.

Czas samodzielny to czas spędzony bezpośrednio na danej aktywności. Łączny czas to czas spędzony w danej aktywności lub w jej podrzędnych.

Aby posortować tabelę według wybranej kolumny, kliknij Czas samodzielnej nauki, Całkowity czas lub Aktywność.

Aby filtrować zdarzenia według nazwy działania, użyj pola Filtr.

Domyślnie menu Grupowanie jest ustawione na Bez grupowania. Menu Grupowanie pozwala posortować tabelę aktywności według różnych kryteriów.

Kliknij Pokaż najcięższą grupę elementów , aby wyświetlić kolejną tabelę po prawej stronie tabeli Aktywność. Kliknij działanie, aby wypełnić tabelę Najbardziej obciążający stos. Tabela Najważniejszy stos pokazuje, które elementy podrzędne wybranego działania trwają najdłużej.

Karta Od dołu

Na karcie Od dołu do góry możesz sprawdzić, które działania bezpośrednio zajmowały najwięcej czasu.

Karta Od dołu wyświetla tylko działania w wybranej części nagrania. Aby dowiedzieć się, jak wybrać fragmenty nagrania, zapoznaj się z sekcją Wybieranie fragmentu nagrania.

Na wykresie płomienistym ścieżki Główna w tym przykładzie widać, że prawie cały czas został poświęcony na wykonanie 3 wywołań funkcji wait(). W związku z tym na karcie Od dołu największa aktywność to wait. Na wykresie płomienistym żółty kolor pod „wait” to w rzeczywistości tysiące połączeń Minor GC. W związku z tym widać, że na karcie Od dołu kolejna pod względem wysokości aktywność to Minor GC.

Kolumna Czas własny przedstawia łączny czas spędzony bezpośrednio w danej aktywności ze wszystkimi jej wystąpieniami.

Kolumna Łączny czas przedstawia łączny czas spędzony w tej aktywności lub w jej aktywności podrzędnej.

Karta Dziennik zdarzeń

Na karcie Dziennik zdarzeń możesz wyświetlać działania w kolejności, w jakiej wystąpiły podczas nagrywania.

Na karcie Dziennik zdarzeń są wyświetlane tylko czynności wykonywane w wybranej części nagrania. Aby dowiedzieć się, jak wybrać fragment nagrania, zapoznaj się z artykułem Wybieranie fragmentu nagrania.

Kolumna Czas rozpoczęcia wskazuje punkt, w którym aktywność się rozpoczęła, względem początku nagrywania. Czas rozpoczęcia 1573.0 ms dla wybranego w tym przykładzie elementu oznacza, że aktywność rozpoczęła się 1573 ms po rozpoczęciu nagrywania.

Kolumna Czas własny pokazuje czas spędzony bezpośrednio w danej aktywności.

Kolumny Łączny czas wskazują czas spędzony bezpośrednio w danym działaniu lub w jego poddziałach.

Kliknij Czas rozpoczęcia, Czas własny lub Łączny czas, aby posortować tabelę według tej kolumny.

Za pomocą pola Filtruj możesz filtrować aktywności według nazwy.

Użyj menu Czas trwania, aby odfiltrować aktywności trwające mniej niż 1 ms lub 15 ms. Domyślnie w menu Czas trwania wybrane jest ustawienie Wszystkie, co oznacza, że są wyświetlane wszystkie aktywności.

Wyłącz pola wyboru Wczytywanie, Skrypty, Renderowanie lub Obraz, aby odfiltrować wszystkie działania z tych kategorii.

Wyświetl terminy

Na ścieżce Czas możesz wyświetlać ważne znaczniki, takie jak:

• Pierwsze wyrenderowanie
• Pierwsze wyrenderowanie treści (FCP)
• Największe wyrenderowanie treści (LCP)
• Zdarzenie DOMContentLoaded (DCL)
• Zdarzenie ładowania (L)
• Twoje niestandardowe połączenia performance.mark(). Pojedynczy znak z etykietką wyświetlany poniżej o czasie trwania 813, 44 ms jest oznaczony etykietą Rozpoczynanie uruchamiania JavaScriptu.
• Twoje niestandardowe połączenia performance.measure(). Poniżej znajduje się żółty zakres o nazwie Powolna interakcja.

Wybierz znacznik, aby wyświetlić więcej informacji na karcie Podsumowanie, w tym sygnaturę czasową, łączny czas, czas własny i obiekt detail. W przypadku wywołań funkcji performance.mark() i performance.measure() karta zawiera też zrzuty stosu.

Wyświetl interakcje

Aby wykryć potencjalne problemy z szybkością działania, wyświetlaj interakcje użytkowników na ścieżce Interakcje.

Aby wyświetlić interakcje:

1. Otwórz Narzędzia deweloperskie, na przykład na stronie demonstracyjnej.
2. Otwórz panel Skuteczność i rozpocznij nagrywanie.
3. Kliknij element (kawa) i zatrzymaj nagrywanie.
4. Na osi czasu odszukaj ścieżkę Interakcje.

W tym przykładzie ścieżka Interakcje pokazuje interakcję wskaźnika. Interakcje mają wąsy, które wskazują opóźnienia danych wejściowych i prezentacji w granicach czasu przetwarzania. Aby wyświetlić etykietkę z opóźnieniem wprowadzania danych, czasem przetwarzania i opóźnieniem wyświetlania, najedź kursorem na interakcję.

Na ścieżce Interakcje na karcie Podsumowanie i w etykietce wyświetlanej po najechaniu kursorem na wykres pojawiają się też ostrzeżenia o czasie od interakcji do kolejnego wyrenderowania (INP) w przypadku interakcji trwających dłużej niż 200 ms:

Ścieżka Interakcje oznacza interakcje trwające ponad 200 ms czerwonym trójkątem w prawym górnym rogu.

Wyświetlanie aktywności GPU

Aktywność GPU możesz sprawdzić w sekcji GPU.

Wyświetl aktywność rastrową

Aktywność rastera możesz wyświetlić w sekcji Pool wątków.

Analizowanie klatek na sekundę (FPS)

W narzędziach dla programistów dostępne są różne sposoby analizowania klatek na sekundę:

• W sekcji Klatki możesz sprawdzić, ile czasu zajęło wyświetlenie danej klatki.
• Aby uzyskać szacowaną liczbę klatek na sekundę w czasie rzeczywistym, gdy strona jest uruchamiana, użyj licznika FPS. Patrz sekcja Wyświetlanie klatek na sekundę w czasie rzeczywistym za pomocą miernika klatek na sekundę.

Sekcja Ramki

W sekcji Klatki możesz sprawdzić, ile dokładnie trwało wyświetlenie danej klatki.

Najedź kursorem na ramkę, aby wyświetlić etykietę z dodatkowymi informacjami.

W tym przykładzie po najechaniu kursorem na ramkę wyświetla się etykietka.

W sekcji Ramki można wyświetlić 4 typy ramek:

1. Klatka nieaktywna (biała). Bez zmian.
2. Ramka (zielona). Wyrenderowano zgodnie z oczekiwaniami i na czas.
3. Częściowo widoczna klatka (żółta z rzadkim wzorem szerokich kresek). Chrome zrobiła wszystko, co możliwe, aby zdążyć na czas z co najmniej niektórymi aktualizacjami wizualnymi. Może się to na przykład zdarzyć, gdy praca głównego wątku procesu renderowania (animacja kanwy) jest opóźniona, ale wątek kompozytora (przewijanie) działa w czasie.
4. Upuszczona ramka (czerwona z gęstymi liniami ciągłymi). Chrome nie może renderować ramki w rozsądnym czasie.

Ten przykład pokazuje etykietkę, gdy najedziesz kursorem na częściowo wyświetlaną ramkę.

Kliknij kadr, aby wyświetlić jeszcze więcej informacji o nim na karcie Podsumowanie. Narzędzia dla programistów obrysowują wybraną ramkę na niebiesko.

Wyświetlanie żądań sieciowych

Rozwiń sekcję Sieć, aby wyświetlić kaskadę żądań sieciowych, które wystąpiły podczas rejestrowania wydajności.

Obok nazwy ścieżki Sieć znajduje się legenda z oznaczonymi kolorami typów żądań.

Żądania blokowania renderowania są oznaczone czerwonym trójkątem w prawym górnym rogu.

Najedź kursorem na prośbę, aby wyświetlić etykietę z:

• Adres URL żądania i łączny czas jego wykonania.
• priorytet lub zmiana priorytetu, np. Medium -> High.
• Określa, czy żądanie ma wartość Render blocking.
• zestawienie czasów realizacji żądań (opisane poniżej).

Gdy klikniesz żądanie, ścieżka Sieć wyświetli strzałkę od inicjatora do żądania.

Dodatkowo w panelu Skuteczność wyświetla się karta Podsumowanie z dodatkowymi informacjami o żądaniu, w tym m.in. polami Początkowy priorytet i (ostatecznie) Priorytet. Jeśli ich wartości się różnią, priorytet pobierania żądania zmienił się podczas nagrywania. Więcej informacji znajdziesz w artykule o optymalizowaniu wczytywania zasobów przy użyciu interfejsu Fetch Priority API.

Na karcie Podsumowanie znajdziesz też zestawienie czasu trwania żądania.

Prośba o www.google.com jest reprezentowana przez linię po lewej stronie (|–), pasek w środku z ciemną i jasną częścią oraz linię po prawej stronie (–|).

Inną rozpiskę czasową znajdziesz na karcie Sieć. Kliknij prawym przyciskiem myszy żądanie na ścieżce sieci lub jego adres URL na karcie Podsumowanie, a potem kliknij Pokaż w panelu Sieć. W Narzędziach deweloperskich przejdziesz do panelu Sieć i wybierzesz odpowiednie żądanie. Otwórz kartę Czas.

Oto jak te 2 zestawienia są ze sobą powiązane:

• Lewa linia (|–) to wszystko do grupy zdarzeń Connection start włącznie. Innymi słowy, jest to wszystko przed Request Sent.
• Jasna część paska to Request sent i Waiting for server response.
• Ciemny obszar paska to Content download.
• Prawa kolumna (–|) to czas oczekiwania na wątek główny. Na karcie Sieć > Harmonogram nie ma tej informacji.

Wyświetlanie danych dotyczących pamięci

Zaznacz pole wyboru Pamięć, aby wyświetlić wskaźniki dotyczące pamięci z ostatniego nagrania.

Narzędzia programistyczne wyświetlają nowy wykres Pamięć nad kartą Podsumowanie. Poniżej wykresu NET znajduje się też nowy wykres o nazwie HEAP. Wykres HEAP zawiera te same informacje co wiersz Heap na wykresie Pamięć.

Ten przykład pokazuje dane o pamięci nad kartą Podsumowanie.

Kolorowe linie na wykresie odpowiadają kolorowym polu wyboru nad wykresem. Odznacz pole wyboru, aby ukryć tę kategorię na wykresie.

Wykres pokazuje tylko wybrany region nagrania. We wcześniejszym przykładzie wykres Pamięć pokazuje wykorzystanie pamięci tylko na początku nagrywania do około 1000 ms.

Wyświetlanie czasu trwania fragmentu nagrania

Analizując sekcję taką jak Sieć lub Główna, czasami potrzebujesz bardziej precyzyjnego oszacowania czasu trwania poszczególnych zdarzeń. Przytrzymaj klawisz Shift, kliknij i przytrzymaj, a następnie przeciągnij w lewo lub w prawo, aby wybrać część nagrania. U dołu wybranego fragmentu narzędzia dla deweloperów pokazują, ile czasu zajęło wykonanie tego fragmentu.

W tym przykładzie sygnatura czasowa 488.53ms u dołu wybranej części wskazuje, ile czasu zajęło jej wykonanie tej części.

Wyświetlanie zrzutu ekranu

Aby dowiedzieć się, jak włączyć zrzuty ekranu, zobacz Robienie zrzutów ekranu podczas nagrywania.

Najedź kursorem na Przegląd osi czasu, aby wyświetlić zrzut ekranu przedstawiający stronę w danym momencie nagrywania. Przegląd osi czasu to sekcja zawierająca wykresy CPU, FPS i NET.

Zrzuty ekranu możesz też wyświetlić, klikając ramkę w sekcji Ramki. Narzędzia deweloperskie wyświetlają małą wersję zrzutu ekranu na karcie Podsumowanie.

W tym przykładzie pokazano zrzut ekranu ramki 195.5ms na karcie Podsumowanie, gdy klikniesz ją w sekcji Ramki.

Aby powiększyć zrzut ekranu, kliknij jego miniaturę na karcie Podsumowanie.

Ten przykład pokazuje powiększony zrzut ekranu po kliknięciu jego miniatury na karcie Podsumowanie.

Wyświetlanie informacji o warstwach

Aby wyświetlić informacje o zaawansowanych warstwach danej klatki:

1. Włącz zaawansowaną instrumentację renderowania.
2. W sekcji Kadry wybierz kadr. Narzędzia programistyczne wyświetlają informacje o warstwach na nowej karcie Warstwy obok karty Dziennik zdarzeń.

Najedź kursorem na warstwę, aby wyróżnić ją na diagramie.

W tym przykładzie po najechaniu kursorem na warstwę #39 jest ona podświetlona.

Aby przenieść diagram:

• Kliknij Tryb panoramowania , aby poruszać się wzdłuż osi X i Y.
• Aby obrócić mapę wzdłuż osi Z, kliknij Tryb obrotu .
• Kliknij Zresetuj transformację , aby przywrócić diagram do jego pierwotnej pozycji.

Zobacz, jak działa analiza warstw:

Wyświetlanie programu Paint Profiler

Aby wyświetlić zaawansowane informacje o zdarzeniu malowania:

1. Włącz zaawansowaną instrumentację renderowania.
2. Wybierz zdarzenie Paint na ścieżce Główna.

Analizowanie wydajności renderowania na karcie Renderowanie

Aby wizualizować wydajność renderowania strony, użyj funkcji na karcie Renderowanie.

Otwórz kartę Renderowanie.

Sprawdzaj liczbę klatek na sekundę w czasie rzeczywistym dzięki miernikowi klatek na sekundę

Statystyki renderowania klatek to nakładka wyświetlana w prawym górnym rogu widoku. Udostępnia ona szacunkową liczbę klatek na sekundę w czasie rzeczywistym.

Zobacz Statystyki renderowania klatek.

Obserwuj wydarzenia malowania w czasie rzeczywistym dzięki migoczeniu farby

Użyj Migania farby, by na bieżąco widzieć wszystkie zdarzenia wyrenderowania na stronie.

Patrz Miganie farby.

Wyświetlanie nakładki warstw za pomocą krawędzi warstw

Użyj opcji Obramowania warstw, aby wyświetlić nakładkę z obramowaniem warstw i kafelkami u góry strony.

Patrz Obramowanie warstw.

Znajdowanie problemów z wydajnością przewijania w czasie rzeczywistym

Użyj problemów z wydajnością podczas przewijania, aby zidentyfikować elementy strony, które mają odbiorców zdarzeń związanych z przewijaniem, a którzy mogą mieć negatywny wpływ na wydajność strony. Narzędzia deweloperskie wskazują potencjalnie problematyczne elementy w kolorze morskim.

Zobacz Problemy z wydajnością przewijania.