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.

Przeczytaj artykuł Pierwsze kroki z analizą wydajności środowiska wykonawczego, aby zapoznać się z samouczkiem dotyczącym analizowania wydajności strony za pomocą Narzędzi deweloperskich w Chrome.

Rekordowa skuteczność

Możesz rejestrować czas działania lub ładować wydajność.

Rejestrowanie wydajności środowiska wykonawczego

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 Narzędziach deweloperskich kliknij kartę Skuteczność.

3. Kliknij Nagraj .

   

4. Wejdź w interakcję ze stroną. Narzędzia deweloperskie rejestrują wszystkie działania na stronach, które mają miejsce w wyniku Twoich interakcji.

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

Rejestrowanie wydajności wczytywania

Rejestruj wydajność wczytywania, gdy chcesz analizować wydajność strony podczas jej wczytywania, a nie podczas 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 wydajnoś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.

Rób zrzuty ekranu podczas nagrywania

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

Aby dowiedzieć się, jak korzystać ze zrzutów ekranu, zapoznaj się z sekcją Wyświetlanie zrzutu ekranu.

Wymuś czyszczenie pamięci podczas nagrywania

Podczas rejestrowania strony kliknij Wyczyść mop, aby wymusić wyczyszczenie tej funkcji.

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

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 przykładami 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 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 powoduje, że procesor działa 2 razy wolniej niż zwykle. Narzędzia deweloperskie nie potrafią w pełni symulować procesora urządzeń mobilnych, ponieważ architektura urządzeń mobilnych bardzo różni się od architektury komputeró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 dotyczących renderowania, zapoznaj się z artykułami Wyświetlanie warstw i Wyświetlanie narzędzia do profilowania wyrenderowania.

Emuluj równoczesność sprzętu

Aby przetestować wydajność aplikacji z różną liczbą rdzeni procesora, możesz skonfigurować wartość raportowaną 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ętu:

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

Obok karty Wydajność w Narzędziach deweloperskich wyświetla się ikona ostrzeżenia , która przypomina, że emulacja równoczesności sprzętu jest włączona.

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 z występu

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.

Poruszanie się po nagraniu

Aby dokładnie przyjrzeć się nagraniu, możesz wybrać fragment nagrania, przewinąć długi wykres płomieniowy, powiększyć lub pomniejszyć widok, a także przechodzić między poziomami powiększenia, używając menu nawigacyjnego.

Wybierz fragment nagrania

Pod paskiem działań w panelu Wydajność u góry nagrania zobaczysz sekcję Oś czasu – omówienie z wykresami CPU i NET.

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

Aby zaznaczyć fragment za pomocą klawiatury:

1. Zaznacz ścieżkę Główna lub jednego z jej sąsiadów.
2. Do powiększania, przesuwania w lewo, pomniejszania i przesuwania 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łó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 tworzenie kolejno wielu zagnieżdżonych menu nawigacyjnego, zwiększanie poziomu powiększenia, a potem przechodzenie na wybrany poziom.

Aby utworzyć menu nawigacyjne i z niego korzystać:

1. Na stronie Przegląd osi czasu wybierz fragment nagrania.
2. Najedź kursorem na wybraną pozycję i kliknij przycisk zoom_in N ms. Wybór będzie się rozwijał, aby wypełnić Przegląd osi czasu. Łańcuch menu nawigacyjnego zaczyna się tworzyć u góry Przeglądu osi czasu.
3. Powtórz 2 poprzednie kroki, aby utworzyć kolejne zagnieżdżone menu nawigacyjne. 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 odpowiednie menu nawigacyjne w łańcuchu u góry Przeglądu osi czasu.

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

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 dowolną aktywność rozpoczynającą się od E.

Aby przeglądać aktywności pasujące do zapytania:

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

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

Aby zmienić ustawienia zapytania:

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

Aby ukryć pole wyszukiwania, kliknij Anuluj.

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.

Ten przykład pokazuje więcej informacji o zdarzeniu wywołania funkcji get na karcie Podsumowanie.

Ukryj funkcje i ich elementy podrzędne na wykresie płomieniowym

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ę elementy podrzędne (R)
   • Zresetuj elementy podrzędne (U)
   • Zresetuj ślad

   

   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 przycisk arrow_drop_down

   

3. Aby zresetować funkcję z ukrytymi elementami podrzędnymi lub całym wykresem płomieniowym, wybierz funkcję i naciśnij U lub kliknij dowolną funkcję prawym przyciskiem myszy i wybierz Resetuj ślad.

Odczytaj wykres płomieniowy

Panel Wydajność przedstawia aktywność w głównym wątku na wykresie płomieniowym. Oś X przedstawia nagranie w czasie. Oś Y reprezentuje stos wywołań. 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 nosi nazwę onEndpointClick_ o nazwie 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. Połączenia nawiązane przez inny skrypt mają kolor jasnoróżowy. Ciemniejszy żółty – działanie skryptu, a fioletowy – aktywność związaną z renderowaniem. Te ciemniejsze, żółte i fioletowe zdarzenia są spójne we wszystkich nagraniach.

Długie zadania są również wyróżnione czerwonym trójkątem, a część powyżej 50 milisekund jest w kolorze czerwonym:

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 płomieniowy wywołań JavaScript, zapoznaj się z sekcją Wyłączanie przykładów JavaScriptu. Gdy przykłady JS są wyłączone, widoczne są tylko zdarzenia ogólne, takie jak Event (click) i Function Call.

Śledzenie inicjatorów zdarzeń

Ścieżka Główna może zawierać strzałki łączące poniższe 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 uzgadnianie 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.

Wyświetlanie aktywności w tabeli

Po zarejestrowaniu strony nie musisz już analizować aktywności wyłącznie na ścieżce głównej. W Narzędziach deweloperskich dostępne są też 3 widoki tabelaryczne do analizy aktywności. Każdy widok daje Ci inną perspektywę na działania:

• Aby wyświetlić działania główne, które powodują najwięcej pracy, skorzystaj z 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 pomóc Ci szybciej znaleźć to, czego szukasz, wszystkie trzy karty mają obok paska Filtr przyciski zaawansowanego filtrowania:

• match_case Uwzględniaj wielkość liter.
• regular_expression Wyrażenie regularne.
• match_word Dopasowanie 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ć Ci debugowanie, Narzędzia deweloperskie znajdują w plikach źródłowych odpowiednie deklaracje funkcji. Poza tym, jeśli dostępne i włączone są odpowiednie mapy źródłowe, 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 prezentacji. Możesz uruchomić wersję demonstracyjną samodzielnie na stronie Activity Tabs Demo. Źródło znajdziesz na 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łomieniowym głównej ścieżki aktywności główne znajdują się na jej górze. Na kartach Drzewo wywołań i Dziennik zdarzeń działania główne należą do elementów najwyższego poziomu.

Przykładowe działania roota 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.

Karta Drzewo wywołań przedstawia tylko działania w wybranej części 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, są aktywnościami głównymi. Zagnieżdżenie reprezentuje stos wywołań. W tym przykładzie reguła Event spowodowała zdarzenie Function Call, które wywołało button.addEventListener, które wywołało b itd.

Czas własny oznacza czas poświęcony bezpośrednio tej aktywności. Łączny czas reprezentuje czas spędzony na danej aktywności lub jej aktywnościach podrzędnych.

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

Użyj pola Filtr, aby przefiltrować zdarzenia według nazwy aktywności.

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

Kliknij Pokaż najcięższy stos , aby wyświetlić kolejną tabelę po prawej stronie tabeli Aktywność. Kliknij aktywność, aby wypełnić tabelę Najważniejszy 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 do góry pokazuje tylko aktywności w wybranej części nagrania. Aby dowiedzieć się, jak wybrać fragmenty nagrania, zapoznaj się z sekcją Wybieranie fragmentu nagrania.

Na głównym wykresie płomieniowym w tym przykładzie widać, że prawie cały czas został poświęcony na wykonywanie 3 wywołań wait(). W związku z tym na karcie Od dołu największa aktywność to wait. Żółty tekst na wykresie płomieniowym poniżej wywołań funkcji wait to w rzeczywistości tysiące wywołań 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ć fragmenty nagrania, zapoznaj się z sekcją Wybieranie fragmentu nagrania.

Kolumna Czas rozpoczęcia wskazuje punkt, w którym aktywność się rozpoczęła, względem początku nagrywania. Czas rozpoczęcia odtwarzania 1573.0 ms dla wybranego elementu w tym przykładzie 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 zawierają czas spędzony bezpośrednio w danej aktywności lub w jej elementach podrzędnych.

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 Czasy możesz zobaczyć ważne znaczniki, takie jak:

• Pierwsze wyrenderowanie
• Pierwsze wyrenderowanie treści (FCP)
• Największe wyrenderowanie treści (LCP)
• Zdarzenie DOMContentLoaded (DCL)
• Zdarzenie Onload (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 zobaczyć więcej szczegółów na karcie Podsumowanie. Aby zobaczyć sygnaturę czasową znacznika, najedź kursorem na ścieżkę Czasy.

Wyświetl interakcje

Możesz przeglądać 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 na przykład na tej stronie demonstracyjnej.
2. Otwórz panel Skuteczność 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 pokazuje interakcję wskaźnika. Interakcje mają wąsy, które wskazują opóźnienia danych wejściowych i prezentacji w granicach czasu przetwarzania. Najedź kursorem na interakcję, aby zobaczyć etykietkę z opóźnieniem danych wejściowych, czasem przetwarzania i opóźnieniem prezentacji.

Ścieżka Interakcje wyświetla też na karcie Podsumowanie oraz w etykietce po najechaniu kursorem ostrzeżenie Interakcja z następnym wyrenderowaniem (INP) w przypadku interakcji dłuższych niż 200 milisekund:

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

Wyświetl aktywność GPU

Możesz wyświetlić aktywność GPU w sekcji GPU.

Wyświetl aktywność rastrową

Aktywność rastrów możesz wyświetlać w sekcji Pula wątków.

Analizowanie klatek 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 określona klatka.
• Licznik klatek na sekundę pozwala oszacować w czasie rzeczywistym liczbę klatek na sekundę podczas wyświetlania strony. 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ć etykietkę z dodatkowymi informacjami na jej temat.

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

W sekcji Klatki mogą być widoczne cztery typy klatek:

1. Nieaktywne ramki (biała). Bez zmian.
2. Ramka (zielona). Wyrenderowano zgodnie z oczekiwaniami i na czas.
3. Częściowo przedstawiona ramka (żółta z rozproszonymi szerokimi kreskami). Przeglądarka Chrome starała się wyrenderować co najmniej kilka aktualizacji wizualnych na czas. Dotyczy to na przykład sytuacji, w których zadanie głównego wątku procesu renderowania (animacja kanwy) jest opóźnione, ale wątek kompozytora (przewijanie) jest w czasie.
4. Upuszczona ramka (czerwona z gęstymi liniami ciągłymi). Chrome nie może wyrenderować ramki w rozsądnym czasie.

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

Kliknij ramkę, aby na karcie Podsumowanie wyświetlić jeszcze więcej informacji na jej temat. Narzędzia deweloperskie obrysują wybraną ramkę na niebiesko.

Wyświetl żądania sieciowe

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

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

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

Kliknij prośbę, aby wyświetlić więcej informacji na jej temat na karcie Podsumowanie. W poprzednim przykładzie na karcie Podsumowanie są wyświetlane informacje o wybranym zielonym żądaniu.

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

Sekcja Podsumowanie zawiera pola Początkowy priorytet i (Ostateczna) Priorytet. Jeśli ich wartości są różne, 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.

W poprzednim przykładzie żądanie www.google.com jest reprezentowane przez linię po lewej stronie, pasek pośrodku z częścią ciemną i jasną 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ą mapowane:

• Wiersz po lewej stronie zawiera wszystkie dane do grupy Connection Start zdarzeń włącznie. Innymi słowy, chodzi o wszystko przed Request Sent, na wyłączność.
• Jasna część paska to Request Sent i Waiting (TTFB).
• Ciemna część paska to Content Download.
• Właściwy wiersz to czas oczekiwania na wątek główny. Nie widać tego na karcie Czas.

Ten przykład pokazuje żądanie www.google.com na pasku wiersza.

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

Wyświetl wskaźniki dotyczące 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 wyświetli się nowy wykres Pamięć. Pod wykresem NET jest też nowy wykres o nazwie HEAP. Wykres HEAP zawiera te same informacje co wiersz Heap na wykresie Pamięć.

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

Kolorowe linie na wykresie odpowiadają kolorowym polu wyboru nad wykresem. wyłączyć pole wyboru, aby ukryć daną 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 Shift, naciśnij i przytrzymaj, a następnie przeciągnij w lewo lub w prawo, aby zaznaczyć fragment nagrania. U dołu zaznaczenia w Narzędziach deweloperskich zobaczysz, ile czasu zajęło Ci dany fragment.

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świetl zrzut 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świetlać, 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 po kliknięciu jej w sekcji Ramki.

Kliknij miniaturę na karcie Podsumowanie, aby powiększyć zrzut ekranu.

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

Wyświetlanie informacji o warstwach

Aby wyświetlić zaawansowane informacje o warstwie na temat ramki:

1. Włącz zaawansowaną instrumentację renderowania.
2. Wybierz klatkę w sekcji Klatki. W Narzędziach deweloperskich informacje o swoich warstwach są wyświetlane na nowej karcie Warstwy obok karty Dziennik zdarzeń.

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

W tym przykładzie po najechaniu na nią kursorem jest podświetlona warstwa #39.

Aby przenieść diagram:

• Aby poruszać się wzdłuż osi X i Y, kliknij Tryb przesunięcia .
• Aby obrócić mapę wzdłuż osi Z, kliknij Tryb obrotu .
• Kliknij Resetuj przekształcenie , aby zresetować diagram do jego pierwotnej pozycji.

Zobacz, jak działa analiza warstw:

Wyświetl program profilujący renderowanie

Aby wyświetlić zaawansowane informacje o zdarzeniu renderowania:

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

Analizowanie wydajności renderowania na karcie Renderowanie

Funkcje dostępne na karcie Renderowanie ułatwiają wizualizację wydajności renderowania strony.

Otwórz kartę Renderowanie.

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

Statystyki renderowania klatek to nakładka widoczna w prawym górnym rogu widocznego obszaru. W czasie rzeczywistym podaje szacunkową liczbę klatek na sekundę podczas działania strony.

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 renderowania na stronie.

Patrz Miganie farby.

Wyświetlanie nakładki warstw z obramowaniem warstw

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

Patrz Obramowanie warstw.

Znajduj problemy z wydajnością przewijania w czasie rzeczywistym

Zapoznaj się z sekcją Problemy z wydajnością przewijania, aby wykrywać elementy strony z detektorami zdarzeń powiązanymi z przewijaniem, które mogą negatywnie wpływać na wydajność strony. Narzędzia deweloperskie wskazują potencjalnie problematyczne elementy w kolorze morskim.

Zobacz Problemy z wydajnością przewijania.