Informacje o funkcjach wydajności

Kayce Basques

Sofia Emelianova

Ta strona zawiera kompleksowe informacje o funkcjach Narzędzi deweloperskich w Chrome związanych z analizą wydajności.

Zapoznaj się z artykułem Pierwsze kroki z analizą wydajności środowiska wykonawczego, aby zapoznać się z samouczkiem dotyczącym analizowania wydajności strony przy użyciu Narzędzi deweloperskich w Chrome.

Rejestruj występy

Możesz rejestrować wydajność środowiska wykonawczego lub wczytywania.

Rejestruj wydajność środowiska wykonawczego

Rejestruj wydajność środowiska wykonawczego, gdy chcesz analizować wydajność działania strony w przeciwieństwie do jej wczytywania.

1. Otwórz stronę, którą chcesz przeanalizować.
2. W Narzędziach deweloperskich kliknij kartę Wydajność.

3. Kliknij Nagraj .

   

4. Wejdź w interakcję ze stroną. Narzędzia deweloperskie rejestrują wszystkie działania na stronie, które są wynikiem Twoich interakcji.

5. Kliknij Nagraj jeszcze raz lub Zatrzymaj, aby zatrzymać nagrywanie.

Rejestruj wydajność wczytywania

Rejestruj wydajność wczytywania, gdy chcesz analizować wydajność strony w trakcie ładowania, w przeciwieństwie do jej uruchomienia.

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

3. Kliknij Rozpocznij profilowanie i załaduj ponownie stronę . DevTools przechodzi najpierw do about:blank, aby usunąć pozostałe zrzuty ekranu i ślady. Następnie Narzędzia deweloperskie rejestrują dane o wydajności podczas ponownego wczytywania strony, a następnie automatycznie zatrzymują nagrywanie kilka sekund po zakończeniu wczytywania.

   

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

W tym przykładzie panel Skuteczność pokazuje aktywność podczas wczytywania strony.

Rób zrzuty ekranu podczas nagrywania

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

Informacje o korzystaniu ze zrzutów ekranu znajdziesz w artykule Wyświetlanie zrzutu ekranu.

Wymuszaj czyszczenie pamięci podczas nagrywania

Podczas rejestrowania strony kliknij Zbierz śmieci mop, aby wymusić czyszczenie pamięci.

Pokaż ustawienia nagrywania

Kliknij Ustawienia przechwytywania , aby wyświetlić więcej ustawień związanych ze sposobem, w jaki Narzędzia deweloperskie rejestrują nagrania wyników.

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 przechwytywania . Zobacz Pokaż ustawienia nagrywania.
2. Zaznacz pole wyboru Disable JavaScript Samples (Wyłącz próbki JavaScript).
3. Zarejestruj stronę.

Na poniższych zrzutach ekranu widać różnicę między wyłączeniem a włączeniem przykładowego kodu JavaScript. Ścieżka główna 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 próbkami JS.

Ograniczanie działania sieci podczas nagrywania

Aby ograniczyć szybkość działania 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 przechwytywania . Zobacz Pokaż ustawienia nagrywania.
2. Ustaw CPU na wybrany poziom ograniczania.

Ograniczanie zależy od możliwości komputera. Na przykład opcja 2-krotnego spowolnienia sprawia, że procesor działa 2 razy wolniej niż zwykle. DevTools nie symuluje tak naprawdę procesorów mobilnych, ponieważ architektura urządzeń mobilnych bardzo różni się od architektury komputerów stacjonarnych i laptopów.

Włącz zaawansowaną instrumentację renderowania

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

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

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

Emuluj równoczesność sprzętu

Aby przetestować wydajność aplikacji z różną liczbą rdzeni procesora, możesz skonfigurować wartość raportowaną przez usługę navigator.hardwareConcurrency. Niektóre aplikacje używają tej właściwości do kontrolowania poziomu równoległości ich aplikacji, na przykład do kontrolowania rozmiaru puli wątków pThread Emscripten.

Aby emulować równoczesność sprzętu:

1. Otwórz menu Ustawienia przechwytywania . Zobacz Pokaż ustawienia nagrywania.
2. Zaznacz Równoczesność sprzętu i w polu do wprowadzania danych ustaw liczbę rdzeni.

Narzędzia deweloperskie wyświetlają ikonę ostrzeżenia obok karty Wydajność, aby przypomnieć, że włączona jest emulacja równoczesności sprzętu.

Aby przywrócić wartość domyślną 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 Załaduj profil.

Wyczyść poprzednie nagranie

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

Analizowanie nagrania z występu

Po zarejestrowaniu wydajności środowiska wykonawczego lub zarejestrowaniu wydajności wczytywania w panelu Wydajność znajdziesz dużo danych, które pozwolą Ci przeanalizować wydajność tego, co się właśnie wydarzyło.

Poruszanie się po nagraniu

Aby dokładnie sprawdzić zarejestrowane dane o wynikach, możesz zaznaczyć fragment nagrania, przewinąć długi wykres płomieniowy, powiększać i pomniejszać obraz oraz przechodzić między poziomami powiększenia za pomocą menu nawigacyjnego.

Zaznacz fragment nagrania

Pod paskiem działań w panelu Wydajność, u góry nagrania, zobaczysz sekcję Przegląd osi czasu z wykresami CPU i NET.

Aby zaznaczyć fragment nagrania, kliknij i przytrzymaj, a następnie przeciągnij w lewo lub w prawo przez obszar Przegląd osi czasu.

Aby zaznaczyć fragment za pomocą klawiatury:

1. Skoncentruj się na ścieżce głównej lub dowolnych jej sąsiadach.
2. Do powiększania, przesuwania w lewo, pomniejszania i przenoszenia w prawo służą klawisze 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łówny i jej sąsiadujące ścieżki).
2. Przesuń dwoma palcami w górę, aby pomniejszyć, przesuń w lewo, aby przejść w lewo, przesuń w dół, aby powiększyć, i przesuń w prawo, aby przejść w prawo.

Twórz menu nawigacyjne i przechodź między poziomami powiększenia

Przegląd osi czasu umożliwia tworzenie kolejno wielu zagnieżdżonych menu nawigacyjnych zwiększających poziom powiększenia, a następnie przechodzenie na wybrany poziom menu.

Aby utworzyć menu nawigacyjne i jego używać:

1. W sekcji Przegląd osi czasu wybierz fragment nagrania.
2. Najedź kursorem na to zaznaczenie i kliknij przycisk zoom_in N ms. Zaznaczenie rozwinie się i wypełni omówienie osi czasu. U góry omówienia osi czasu rozpoczyna się łańcuch menu nawigacyjnego.
3. Powtórz dwa poprzednie kroki, by utworzyć kolejne zagnieżdżone menu nawigacyjne. Menu nawigacyjne możesz zagnieżdżać, o ile wybrany zakres jest dłuższy niż 5 milisekund.
4. Aby przejść do wybranego poziomu powiększenia, kliknij odpowiednie menu nawigacyjne w łańcuchu na górze omówienia osi czasu.

Przewijanie długiego wykresu płomieniowego

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

Aktywność związana z wyszukiwaniem

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

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

Ten przykład pokazuje wyrażenie regularne w polu wyszukiwania u dołu, które znajduje każdą aktywność rozpoczynającą się od E.

Aby przejrzeć aktywności pasujące do zapytania:

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

Nad aktywnością wybraną w polu wyszukiwania w panelu Wydajność pojawi się etykietka.

Aby zmienić ustawienia zapytania:

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

Aby ukryć pole wyszukiwania, kliknij Anuluj.

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

Użyj ścieżki głównej, aby wyświetlić aktywność, która miała miejsce w głównym wątku strony.

Kliknij zdarzenie na karcie Podsumowanie, aby wyświetlić więcej informacji na jego temat. Panel Skuteczność podświetla wybrane zdarzenie na niebiesko.

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

Odczytaj wykres płomieniowy

Panel Skuteczność przedstawia główną aktywność wątku na wykresie płomieniowym. Oś X przedstawia rejestrowanie na przestrzeni czasu. Oś Y reprezentuje stos wywołań. Zdarzenia na górze powodują poniższe zdarzenia.

Ten przykład pokazuje wykres płomieniowy na ścieżce głównej. Zdarzenie click spowodowało wywołanie funkcji anonimowej. Ta funkcja z kolei ma nazwę onEndpointClick_, która wywołuje handleClick_ itd.

W panelu Wydajność skrypty są przypisywane losowe kolory, co pozwala przerwać wykres płomieniowy i zwiększyć jego czytelność. We wcześniejszym przykładzie wywołania funkcji z jednego skryptu mają kolor jasnoniebieski. Wywołania z innego skryptu mają kolor jasnoróżowy. Ciemniejszy żółty oznacza aktywność związaną ze skryptami, a fioletowy – aktywność związaną z renderowaniem. Ciemniejsze żółte i fioletowe wydarzenia są takie same we wszystkich nagraniach.

Długie zadania są również wyróżnione czerwonym trójkątem, a część, która wynosi ponad 50 milisekund, jest na czerwono:

W tym przykładzie wykonanie zadania trwało ponad 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 procesorów uruchomionych i zatrzymanych za pomocą funkcji konsoli profile() i profileEnd().

Aby ukryć szczegółowy wykres płomieniowy wywołań JavaScriptu, przeczytaj artykuł Wyłączanie przykładów JavaScriptu. Gdy próbki JavaScriptu są wyłączone, zobaczysz tylko zdarzenia wysokiego poziomu, takie jak Event (click) i Function Call.

Śledzenie inicjatorów zdarzeń

Ścieżka główna może zawierać strzałki łączące te inicjatory i wywołane przez nie zdarzenia:

• Unieważnienie stylu lub układu -> Ponownie oblicz style lub Układ
• Żądanie ramki animacji -> Uruchomiono ramkę animacji
• Żądanie nieaktywnego wywołania zwrotnego -> Uruchom nieaktywne wywołanie zwrotne
• Zainstaluj licznik czasu -> Uruchomiono licznik czasu
• Utwórz WebSocket -> Wyślij... i Odbierz WebSocket Handshake lub Zniszcz WebSocket

Aby zobaczyć strzałki, znajdź jeden z inicjatorów na wykresie płomieniowym i kliknij go.

Wyświetlanie aktywności w tabeli

Po zarejestrowaniu strony nie musisz przeprowadzać analizy aktywności tylko na ścieżce głównej. W Narzędziach deweloperskich dostępne są też 3 widoki tabelaryczne do analizy działań. Każdy widok przedstawia różne perspektywy działań:

• Aby wyświetlić działania główne, które powodują najwięcej pracy, użyj karty Drzewo wywołań.
• Jeśli chcesz wyświetlić działania, w przypadku których zajęto najwięcej czasu, użyj karty Od dołu.
• Jeśli chcesz wyświetlić działania w kolejności, w jakiej wystąpiły podczas rejestrowania, użyj karty Dziennik zdarzeń.

Aby szybciej znaleźć to, czego szukasz, obok paska Filtr na wszystkich 3 kartach znajdują się przyciski zaawansowanego filtrowania:

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

Każdy widok tabeli 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. Poza tym jeśli dostępne są odpowiednie mapy źródeł, Narzędzia deweloperskie automatycznie znajdują oryginalne pliki.

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

Uwaga: wszystkie 3 kolejne sekcje dotyczą tej samej wersji demonstracyjnej. Możesz samodzielnie uruchomić prezentację w prezentacji kart aktywności i sprawdzić źródło na stronie GoogleChrome/devtools-samples/perf/activitytabs.html.

Aktywności główne

Oto objaśnienie koncepcji działań głównych, o którym mowa w sekcjach Drzewo połączeń, Od dołu i Dziennik zdarzeń.

Działania główne powodują, że przeglądarka wykonuje pewne działania. Jeśli na przykład klikniesz stronę, przeglądarka uruchomi jako główną aktywność Event. To Event może spowodować wykonanie modułu obsługi.

Na wykresie płomieniowym ścieżki głównej aktywności na szczeblu głównym znajdują się na górze wykresu. Na kartach Drzewo wywołań i Dziennik zdarzeń działania główne to elementy najwyższego poziomu.

Przykładowe działania główne znajdziesz na karcie Drzewo wywołań.

Karta Drzewo połączeń

Na karcie Drzewo wywołań możesz sprawdzić, które działania główne powodują najwięcej pracy.

Na karcie Drzewo połączeń widać działania tylko w wybranej części nagrania. Informacje o tym, jak zaznaczać fragmenty, znajdziesz w sekcji Wybieranie fragmentu nagrania.

W tym przykładzie najwyższego poziomu elementów w kolumnie Aktywność, takich jak Event, Paint i Composite Layers, są aktywnościami głównymi. Zagnieżdżenie reprezentuje stos wywołań. W tym przykładzie Event powoduje wywołanie funkcji Function Call, która powoduje button.addEventListener, która powoduje b i tak dalej.

Czas własny to czas spędzony bezpośrednio na danej aktywności. Całkowity czas oznacza czas spędzony w danej aktywności lub jej elementach podrzędnych.

Kliknij Sam czas, Łączny czas lub Aktywność, aby posortować tabelę według tej kolumny.

W polu Filtr możesz filtrować zdarzenia według nazwy aktywności.

Domyślnie menu Grupowanie jest ustawione na Bez grupowania. Za pomocą menu Grupowanie możesz sortować tabelę aktywności według różnych kryteriów.

Kliknij Pokaż największy stos , aby wyświetlić kolejną tabelę po prawej stronie tabeli Aktywność. Kliknij działanie, aby wypełnić tabelę Najsilniejszy stos. Tabela Najbliższy stos pokazuje, które elementy podrzędne wybranej aktywności trwały najdłużej.

Karta Od dołu do góry

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

Karta Od dołu do góry wyświetla tylko aktywności podczas wybranej części nagrania. Informacje o tym, jak zaznaczać fragmenty, znajdziesz w sekcji Wybieranie fragmentu nagrania.

Na głównym wykresie płomieniowym 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 najważniejszym działaniem na karcie Od dołu jest wait. Na wykresie płomieniowym żółty kolor pod wywołaniami wait to faktycznie tysiące wywołań Minor GC. W związku z tym na karcie Od dołu kolejne najdroższe działanie to Minor GC.

Kolumna Czas własny przedstawia łączny czas spędzony bezpośrednio w danej aktywności (we wszystkich wystąpieniach).

Kolumna Łączny czas przedstawia łączny czas spędzony w ramach danej aktywności lub jej elementów podrzędnych.

Karta Dziennik zdarzeń

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

Na karcie Dziennik zdarzeń są wyświetlane tylko działania z wybranej części nagrania. Informacje o tym, jak zaznaczać fragmenty, znajdziesz w sekcji Wybieranie fragmentu nagrania.

Kolumna Czas rozpoczęcia wskazuje miejsce rozpoczęcia aktywności względem początku nagrywania. Czas rozpoczęcia funkcji 1573.0 ms wybranego elementu w tym przykładzie oznacza, że aktywność rozpoczęła się 1573 ms od rozpoczęcia nagrywania.

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

Kolumny Łączny czas podają czas spędzony bezpośrednio w danej aktywności lub w jednym z jej elementów podrzędnych.

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

W polu Filtr możesz filtrować aktywności według nazwy.

Za pomocą menu Czas trwania możesz odfiltrować wszystkie działania, które trwały mniej niż 1 ms lub 15 ms. Domyślnie menu Czas trwania ma wartość Wszystkie, co oznacza, że widoczne są wszystkie aktywności.

Wyłącz pola wyboru Wczytywanie, Obsługa skryptów, Renderowanie lub Malowanie, aby odfiltrować wszystkie aktywności z tych kategorii.

Wyświetl terminy

Na ścieżce Czas realizacji wyświetl ważne znaczniki, takie jak:

• Pierwsze renderowanie (FP)
• Pierwsze wyrenderowanie treści (FCP)
• Największe wyrenderowanie treści (LCP)
• Zdarzenie DOMContentLoaded (DCL)
• Zdarzenie onload (L)
• Twoje niestandardowe połączenia z performance.mark(). Pojedynczy znak z etykietką jest wyświetlany poniżej czasu 813, 44 ms z etykietą Rozpoczynam uruchamianie JavaScriptu.
• Twoje niestandardowe połączenia z performance.measure(). Poniżej widoczny jest żółty zakres oznaczony Powolna interakcja.

Aby zobaczyć więcej szczegółów na karcie Podsumowanie, wybierz znacznik. Aby zobaczyć sygnaturę czasową znacznika, najedź na niego kursorem na ścieżce Czasy.

Wyświetl interakcje

Wyświetl interakcje użytkowników na ścieżce Interakcje, aby wykrywać potencjalne problemy z responsywnością.

Aby wyświetlić interakcje:

1. Otwórz Narzędzia deweloperskie, np. na tej stronie demonstracyjnej.
2. Otwórz panel Wydajność i rozpocznij nagrywanie.
3. Kliknij element (kawa) i zatrzymaj nagrywanie.
4. Znajdź ścieżkę Interakcje na osi czasu.

W tym przykładzie ścieżka Interakcje wskazuje interakcję Wskaźnik. Interakcje mają wąsy, które wskazują opóźnienia w przetwarzaniu danych wejściowych i prezentacji w granicach czasu przetwarzania. Najedź kursorem na interakcję, aby wyświetlić etykietkę z opóźnieniem wprowadzania danych, czasem przetwarzania i opóźnieniem prezentacji.

Ścieżka Interakcje zawiera też ostrzeżenia Interakcja przy kolejnym wyrenderowaniu (INP) w przypadku interakcji dłuższych niż 200 milisekund, na karcie Podsumowanie oraz w etykietce po najechaniu kursorem:

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

Wyświetl aktywność GPU

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

Wyświetl aktywność rastrową

W sekcji Raster możesz zobaczyć aktywność związaną z rastrem.

Analizuj klatki na sekundę (FPS)

Narzędzia deweloperskie zapewniają wiele sposobów analizowania klatek na sekundę:

• W sekcji Klatki możesz sprawdzić, jak długo trwała dana klatka.
• Użyj miernika klatek na sekundę, aby oszacować liczbę klatek na sekundę podczas działania strony. Zapoznaj się z sekcją Wyświetlanie klatek na sekundę w czasie rzeczywistym za pomocą miernika klatek na sekundę.

Sekcja Ramki

Sekcja Klatki podaje dokładnie, jak długo trwała dana klatka.

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

Ten przykład pokazuje etykietkę po najechaniu kursorem na ramkę.

Sekcja Klatki może wyświetlać 4 rodzaje klatek:

1. Nieaktywna ramka (biała). Bez zmian.
2. Ramka (zielona). Wyrenderowano zgodnie z oczekiwaniami i w odpowiednim czasie.
3. Częściowo przedstawiona ramka (żółta z rzadkim, szerokim wzorem kresek). Przeglądarka Chrome dołożyła wszelkich starań, by renderować na czas przynajmniej część aktualizacji wizualnych. Na przykład wtedy, gdy praca głównego wątku w procesie renderowania (animacja na płótnie) opóźnia się, ale wątek kompozytora (przewijanie) nadejdzie w odpowiednim czasie.
4. Usunięta ramka (czerwona z gęstym, linią ciągłą). Chrome nie może wyrenderować ramki w rozsądnym czasie.

Ten przykład pokazuje etykietkę po najechaniu kursorem na częściowo widoczną ramkę.

Kliknij ramkę, aby na karcie Podsumowanie zobaczyć więcej informacji na jej temat. Narzędzia deweloperskie zaznaczają wybraną ramkę na niebiesko.

Wyświetlanie żądań sieciowych

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

Żądania są oznaczone następującymi kolorami:

• HTML: niebieski
• CSS: fioletowy
• JS: żółty
• Obrazy: zielony

Kliknij prośbę, aby na karcie Podsumowanie wyświetlić więcej informacji na jej temat. We wcześniejszym przykładzie na karcie Podsumowanie znajdują się informacje o wybranej prośbie w kolorze zielonym.

Ciemnoniebieski kwadrat w lewym górnym rogu żądania oznacza, że żądanie ma wyższy priorytet. Jaśniejszy niebieski kwadrat oznacza niższy priorytet. We wcześniejszym przykładzie wybrane żądanie ma wysoki priorytet, a niebieskie – najwyższy priorytet.

Sekcja Podsumowanie zawiera pola Początkowy priorytet i Priorytet (końcowy). Jeśli ich wartości się różnią, priorytet pobierania żądania zmienił się podczas nagrywania. Więcej informacji znajdziesz w artykule Optymalizowanie wczytywania zasobów przy użyciu interfejsu Fetch Priority API.

We wcześniejszym przykładzie żądanie www.google.com ma postać linii po lewej stronie, słupka pośrodku z ciemną i jasną częścią oraz linią po prawej stronie. Następny zrzut ekranu przedstawia to samo żądanie na karcie Czas w panelu Sieć. Oto jak te 2 reprezentacje są ze sobą powiązane:

• Wiersz po lewej stronie zawiera wszystko, co znajduje się w grupie Connection Start (włącznie). Innymi słowy, wszystko, co znajduje się przed Request Sent, jest na wyłączność.
• Jasna część słupka to Request Sent i Waiting (TTFB).
• Ciemna część słupka to Content Download.
• Właściwa linia to zasadniczo czas oczekiwania na wątek główny. Nie znajduje się ona na karcie Czas.

Ten przykład pokazuje żądanie www.google.com w postaci paska liniowego.

Ten przykład przedstawia żądanie www.google.com na karcie Czas.

Wyświetl wskaźniki pamięci

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

Nad kartą Podsumowanie w Narzędziach deweloperskich pojawi się nowy wykres Pamięć. Pod wykresem NET znajduje się nowy wykres o nazwie HEAP. Wykres HEAP zawiera te same informacje co wiersz JS Heap na wykresie Pamięć.

W tym przykładzie wyświetlane są wskaźniki pamięci nad kartą Podsumowanie.

Kolorowe linie na wykresie są mapowane na kolorowe pola wyboru nad wykresem. Wyłącz pole wyboru, aby ukryć daną kategorię na wykresie.

Wykres pokazuje tylko ten obszar nagrania, który został wybrany. We wcześniejszym przykładzie wykres Pamięć pokazuje tylko wykorzystanie pamięci na początku nagrywania (do około 1000 ms).

Wyświetlanie czasu trwania fragmentu nagrania

Podczas analizowania sekcji takiej jak Sieć czy Główna możesz czasem potrzebować dokładniejszego oszacowania czasu trwania poszczególnych zdarzeń. Przytrzymaj klawisz Shift, kliknij i przytrzymaj, a następnie przeciągnij w lewo lub w prawo, aby zaznaczyć fragment nagrania. U dołu zaznaczenia zobaczysz w Narzędziach deweloperskich, ile czasu zajął dany fragment.

W tym przykładzie sygnatura czasowa 488.53ms u dołu wybranej części wskazuje, jak długo trwała ta część.

Wyświetlanie zrzutu ekranu

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

Najedź kursorem na Przegląd osi czasu, aby wyświetlić zrzut ekranu przedstawiający, jak wyglądała strona w danym momencie nagrania. Przegląd osi czasu to sekcja, która zawiera wykresy CPU, FPS i NET.

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

Ten przykład przedstawia zrzut ekranu ramki 195.5ms na karcie Podsumowanie, gdy klikniesz ją w sekcji Klatki.

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

Ten przykład pokazuje powiększony zrzut ekranu, gdy klikniesz jego miniaturę na karcie Podsumowanie.

Wyświetlanie informacji o warstwach

Aby wyświetlić informacje o ramce z zaawansowanymi warstwami:

1. Włącz zaawansowaną instrumentację renderowania.
2. Wybierz klatkę w sekcji Klatki. Narzędzia deweloperskie wyświetlają informacje o warstwach na nowej karcie Warstwy, obok karty Dziennik zdarzeń.

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

Ten przykład przedstawia warstwę #39 podświetloną po najechaniu na nią kursorem.

Aby przenieść wykres:

• Kliknij Tryb przesuwania , aby poruszać się wzdłuż osi X i Y.
• Aby obracać widok wzdłuż osi Z, kliknij Tryb obracania .
• Kliknij Zresetuj przekształcenie , aby przywrócić diagram do pierwotnego położenia.

Zobacz analizę warstwy w praktyce:

Wyświetl program profilujący farby

Aby wyświetlić zaawansowane informacje o zdarzeniu wyrenderowania:

1. Włącz zaawansowaną instrumentację renderowania.
2. Na ścieżce głównej wybierz zdarzenie Paint.

Analizowanie wydajności renderowania na karcie Renderowanie

Korzystając z funkcji na karcie Renderowanie, możesz zwizualizować wydajność renderowania strony.

Otwórz kartę Renderowanie.

Wyświetlaj klatki na sekundę w czasie rzeczywistym za pomocą miernika klatek na sekundę

Statystyki renderowania klatki to nakładka widoczna w prawym górnym rogu widocznego obszaru. Podaje szacowaną liczbę klatek na sekundę podczas działania strony.

Zobacz Statystyki renderowania klatek.

Sprawdzaj wydarzenia malarskie w czasie rzeczywistym dzięki Flashingowi

Użyj narzędzia Paint Flashing, aby zobaczyć wszystkie zdarzenia wyrenderowania na stronie w czasie rzeczywistym.

Patrz: Miwanie farby.

Wyświetlanie nakładki warstw z obramowaniem warstw

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

Patrz Obramowania warstw.

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

Użyj narzędzia Problemy z wydajnością przewijania, aby zidentyfikować elementy strony, które zawierają detektory zdarzeń związane z przewijaniem i mogą mieć wpływ na działanie strony. Narzędzia deweloperskie zaznaczają potencjalnie problemy w kolorze morskim.

Patrz Problemy z wydajnością przewijania.