Informacje o funkcjach wydajności

Kayce Basques

Sofia Emelianova

Ta strona zawiera obszerne informacje o funkcjach 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ść w czasie działania, gdy chcesz analizować wydajność strony w trakcie jej działania, a nie wczytywania.

1. Otwórz stronę, którą chcesz przeanalizować.
2. W DevTools kliknij kartę Skuteczność.

3. Kliknij Nagrywaj .

   

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

5. Aby zatrzymać nagrywanie, kliknij Nagrywaj ponownie lub Zatrzymaj.

Wydajność wczytywania nagrań

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

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ę. Najpierw przechodzi do about:blank, aby usunąć wszystkie pozostałe zrzuty ekranu i ślady. Następnie Narzędzie deweloperskie rejestruje dane o wydajności podczas ponownego wczytywania strony, a potem automatycznie zatrzymuje nagrywanie po kilku sekundach od zakończenia wczytywania.

   

Narzędzia deweloperskie automatycznie powiększają fragment nagrania, w którym wystąpiła największa aktywność.

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

Robienie zrzutów ekranu podczas nagrywania

Zaznacz pole wyboru Zrzuty ekranu, aby robić zrzuty ekranu każdego klatki podczas nagrywania.

Aby dowiedzieć się, jak korzystać ze zrzutów ekranu, przeczytaj artykuł Wyświetlanie zrzutu ekranu.

Wymuszanie czyszczenia pamięci podczas nagrywania

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

Pokaż ustawienia nagrywania

Kliknij Ustawienia rejestrowania , aby wyświetlić więcej ustawień związanych z rejestrowaniem wydajności przez DevTools.

Wyłączanie próbek JavaScriptu

Domyślnie ścieżka Główna w nagraniu zawiera szczegółowe stosy wywołań funkcji JavaScriptu, które były wywoływane 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 JavaScriptu.
3. Wykonaj nagranie strony.

Na poniższych zrzutach ekranu widać różnicę między wyłączaniem a włączaniem przykładów 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 kodu JS.

ograniczać prędkość sieci podczas nagrywania,

Aby ograniczyć przepustowość sieci podczas nagrywania:

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

Ograniczanie wykorzystania procesora 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 2x spowolnienie sprawia, że procesor działa 2 razy wolniej niż zwykle. Narzędzia dla programistó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łączanie statystyk selektora arkusza CSS

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

1. Otwórz menu Ustawienia rejestrowania . 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.

Dodawanie adnotacji do nagrania i udostępnianie go

Po zarejestrowaniu ścieżki wydajności możesz ją przeanalizować i dodać do niej adnotacje, aby udostępnić swoje spostrzeżenia.

Aby dodać adnotacje do nagrania, otwórz kartę Adnotacje na pasku bocznym left_panel_open po lewej stronie panelu Skuteczność. Adnotacje możesz dodawać na kilka sposobów:

• Etykietowanie elementu: aby dodać etykietę do elementu, kliknij go dwukrotnie i wpisz etykietę.
• Połącz 2 elementy: aby połączyć 2 elementy za pomocą strzałki, kliknij dwukrotnie pierwszy element, kliknij strzałkę obok niego, a potem kliknij drugi element.
• Oznacz zakres czasu: aby oznaczyć dowolny zakres czasu, przeciągnij z wciśniętym klawiszem Shift od początku do końca zakresu, a potem wpisz etykietę.

W tym przykładzie na ścieżce Sieć widać 2 otagowane żądania, połączenie między nimi oraz otagowany zakres czasu wyróżniony na różowo. Karta Adnotacje zawiera obok nazwy liczbę adnotacji – w tym przykładzie 4.

Aby usunąć adnotację, na karcie Adnotacje najedź na nią kursorem i kliknij usuń Usuń.

Aby ukryć adnotacje w śladzie wydajności, na dole karty Adnotacje zaznacz check_box Ukryj adnotacje.

Zapisywanie i udostępnianie nagrania

Aby zapisać nagranie i później udostępnić je wraz z otagowanymi wynikami dotyczącymi wydajności, na pasku czynności u góry panelu Skuteczność kliknij pobierz Pobierz i wybierz Zapisz ślad.

Możesz też wybrać Zapisz ślad bez adnotacji.

Wczytywanie nagrania

Aby załadować nagranie, na pasku czynności u góry panelu Skuteczność kliknij Prześlij Prześlij.

Jeśli w śladzie znajdują się adnotacje, panel Skuteczność je wyświetli.

Wyczyść poprzednie nagranie

Po nagraniu kliknij Wyczyść nagranie aby usunąć nagranie z panelu Skuteczność.

Analizowanie nagrania dotyczącego wydajności

Po zapisaniu wydajności w czasie działania lub zapisaniu wydajności wczytywania panel Skuteczność zawiera wiele danych do analizy skuteczności tego, co się właśnie wydarzyło.

Przydatne statystyki

Panel Wydajność konsoliduje dane o skuteczności z raportu Lighthouse i wycofanego panelu Statystyki wydajności. Te statystyki mogą sugerować sposoby poprawy skuteczności i zawierać analizę tych problemów z wydajnością:

• LCP i INP według etapu
• Wykrywanie żądań LCP
• Przyczyny problemów związanych z przesunięciem układu
• Prośby o zablokowanie renderowania
• inne firmy;
• Przesyłanie obrazów
• Czas oczekiwania na żądanie dokumentu
• Optymalizacja widocznego obszaru pod kątem urządzeń mobilnych
• Koszty selektora CSS

Aby korzystać ze statystyk:

1. Nagraj swój występ.
2. Na pasku bocznym po lewej stronie w panelu Skuteczność otwórz kartę Statystyki, rozwiń różne sekcje i najedź kursorem na elementy, a potem kliknij je. W panelu Skuteczność zostaną wyróżnione odpowiednie zdarzenia w wyświetleniu.

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ę Omówienie osi czasu lub dowolną ścieżkę (Główna i sąsiednie).
2. Przesuń 2 palcami w górę, aby pomniejszyć widok, w lewo, aby przesunąć w lewo, w dół, aby powiększyć widok, oraz w prawo, aby przesunąć w prawo.

Tworzenie ścieżek i przełączanie się między poziomami powiększenia

Przegląd osi czasu umożliwia tworzenie kolejnych zagnieżdżonych ścieżek nawigacyjnych, zwiększanie poziomów powiększenia, a następnie swobodne przełączanie się między nimi.

Aby utworzyć ścieżkę i z niej korzystać:

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. U góry przeglądu osi czasu zacznie się tworzyć łańcuch elementów nawigacyjnych.
3. Powtórz 2 poprzednie kroki, aby utworzyć kolejną zagnieżdżoną ścieżkę. Możesz nadal zagnieżdżać elementy ścieżki, o ile zakres wyboru jest dłuższy niż 5 ms.
4. Aby przejść do wybranego poziomu powiększenia, kliknij odpowiedni element ścieżki na górze przeglądu osi czasu.

Aby usunąć elementy podrzędne elementu menu nawigacyjnego, kliknij prawym przyciskiem myszy element nadrzędny i wybierz Usuń elementy podrzędne menu nawigacyjnego.

Przewijanie długiego wykresu płomieniowego

Aby przewinąć długi wykres ścieżki Główna lub dowolnej ścieżki sąsiadującej, 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 i 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ępny.

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

Aby zmodyfikować ustawienia zapytania:

• Aby zastosować rozróżnianie wielkości liter w zapytaniu, kliknij match_case Dopasuj 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 ścieżek i ich ukrywanie

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ół. Aby ją ukryć, kliknij visibility_off.
3. Gdy skończysz, u dołu kliknij Zakończ konfigurowanie ścieżek, aby wyjść z trybu konfiguracji.

Aby zobaczyć, jak to działa, obejrzyj film.

Panel Wydajność zapisuje konfigurację ścieżki dla nowych prześledowań, ale nie w kolejnych sesjach Narzędzi deweloperskich.

Wyświetlanie aktywności w głównym wątku

Użyj ścieżki Główna, aby wyświetlić aktywność, 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ść wybrane 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łomienia. Oś X przedstawia nagranie w czasie. Oś Y reprezentuje stos wywołania. Zdarzenia u góry powodują zdarzenia poniżej.

Ten przykład pokazuje wykres słupkowy w ścieżce Główna. Anonimowe wywołanie funkcji zostało spowodowane przez zdarzenie click. Ta funkcja z kolei wywołuje funkcję onEndpointClick_, która z kolei wywołuje funkcję handleClick_ itd.

Panel Skuteczność przypisuje skryptom losowe kolory, aby podzielić diagram płomienisty i ułatwić jego czytelność. W poprzednim przykładzie wywołania funkcji z jednego skryptu są podświetlone na niebiesko. 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ęść dłuższa niż 50 ms jest zacieniona na czerwono:

W tym przykładzie zadanie zajęło ponad 400 ms, więc część reprezentująca ostatnie 350 ms jest zacieniona na czerwono, a początkowe 50 ms nie jest zaciennione.

Dodatkowo ścieżka Główna zawiera informacje o profilach procesora uruchomionych i zatrzymanych za pomocą funkcji 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:

• Odrzucenie stylu lub układu –> Ponownie oblicz style lub Układ.
• Żądanie klatki animacji -> Uruchomiono klatkę animacji
• Request Inactive Callback -> Fire Inactive Callback
• Zainstaluj licznik czasu -> Uruchomiono licznik czasu
• Utwórz WebSocket -> Wyślij… i Otrzymanie uzgodnienia połączenia WebSocket lub Zniszcz WebSocket

Aby zobaczyć strzałki, znajdź w diagramie płomienia początek lub zdarzenie, które go spowodowało, i je wybierz.

Po jej wybraniu na karcie Podsumowanie widać linki Initiator for (inicjator) dla inicjatorów oraz linki Initiated by (Wywołane przez) dla wywołanych przez nich zdarzeń. Kliknij je, aby przełączać się między odpowiednimi zdarzeniami.

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

Aby uporządkować diagram płomienia w wątku Główny, możesz ukryć wybrane funkcje lub ich elementy podrzędne:

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

   • 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 fragmentów kodu (I)

   

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

2. Aby zobaczyć liczbę ukrytych elementów podrzędnych, najedź kursorem na przycisk 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.

Ignorowanie skryptów na wykresie płomienia

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 z wyszukiwania lub z niestandardowych reguł wykluczenia.

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 zapewnia 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ń.
• Jeśli chcesz wyświetlić aktywności, na które poświęcono 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 nagrywania, użyj 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.
• 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ń, np. do wywołań 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: następne 3 sekcje odnoszą się do tego samego demonstracyjnego konta. 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 związane z rootem

Poniżej znajdziesz wyjaśnienie pojęcia podstawowych działań, które jest wspomniane w sekcji Drzewo wywołań, Od dołu do góry i Dziennik zdarzeń.

Działania główne to takie, które powodują, że przeglądarka musi wykonać jakąś pracę. Gdy na przykład klikniesz stronę, przeglądarka uruchamia aktywność Event jako aktywność główną. Może to spowodować wykonanie Event.

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ń czynności wierzchołkowe są elementami najwyższego poziomu.

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

Karta Drzewo wywołań

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ć fragment nagrania, zapoznaj się z artykułem 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. Za pomocą menu Grupowanie możesz 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 Najbardziej obciążający skok pokazuje, które podelementy wybranej aktywności zajęły najwięcej czasu na wykonanie.

Karta Od dołu do góry

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

Karta Od dołu wyświetla tylko działania w wybranej części nagrania. Aby dowiedzieć się, jak wybrać fragment nagrania, zapoznaj się z artykułem 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(). Dlatego najważniejsza aktywność na karcie Od dołu to wait. Na wykresie płomienistym żółty kolor pod „wait” to w rzeczywistości tysiące połączeń Minor GC. Dlatego na karcie Od dołu możesz zobaczyć, że kolejną najdroższą aktywnością jest Minor GC.

Kolumna Czas samodzielny to łączny czas spędzony bezpośrednio w danej aktywności w przypadku wszystkich jej wystąpień.

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

Karta Dziennik zdarzeń

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

Karta Dziennik zdarzeń wyświetla tylko działania 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 moment rozpoczęcia danej aktywności w stosunku do początku nagrania. Czas rozpoczęcia 1573.0 ms dla wybranego elementu w tym przykładzie oznacza, że aktywność rozpoczęła się 1573 ms po rozpoczęciu nagrywania.

Kolumna Czas samodzielny przedstawia czas spędzony bezpośrednio w ramach danej aktywności.

Kolumny Łączny czas wskazują czas spędzony bezpośrednio w danej aktywności lub w jakimkolwiek jej podgrupie.

Aby posortować tabelę według wybranej kolumny, kliknij Czas rozpoczęcia, Czas trwania lub Całkowity czas.

Za pomocą pola Filtr możesz filtrować działania według nazwy.

Użyj menu Czas trwania, aby odfiltrować wszystkie aktywności, które zajęły mniej niż 1 ms lub 15 ms. Domyślnie menu Czas trwania jest ustawione na Wszystkie, co oznacza, że wyświetlane są wszystkie aktywności.

Aby odfiltrować wszystkie działania z tych kategorii, odznacz pola wyboru Ładowanie, Skryptowanie, Renderowanie lub Malowanie.

Wyświetlanie czasów

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

• Pierwsze wyrenderowanie (FP)
• Pierwsze wyrenderowane treści (FCP)
• Największe wyrenderowanie treści (LCP)
• Zdarzenie DOMContentLoaded (DCL)
• Zdarzenie ładowania (L)
• Twoje niestandardowe połączenia performance.mark(). Poniżej widać pojedynczą plakietkę z opisem, która pojawia się po 813,44 ms.Oznaczona jest etykietą Rozpoczynanie wykonywania kodu JavaScript.
• Twoje niestandardowe połączenia performance.measure(). Poniżej widać żółty element o nazwie Powolna interakcja.

Wybierz znacznik, aby wyświetlić więcej szczegółów na karcie Podsumowanie, w tym jego sygnaturę czasową, łączny czas trwania, czas trwania samego znacznika oraz detail obiekt. W przypadku wywołań performance.mark() i performance.measure() na karcie są też widoczne ścieżki wywołań.

Wyświetlanie interakcji

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źnik. Interakcje mają wąsy, które wskazują opóźnienia wprowadzania danych i prezentacji na 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 wyświetlane są też ostrzeżenia dotyczące czasu od interakcji do kolejnego wyrenderowania (INP) w przypadku interakcji trwających dłużej niż 200 ms na karcie Podsumowanie i w etykietce po najechaniu kursorem:

Ścieżka Interakcje oznacza interakcje trwające ponad 200 ms za pomocą czerwonego trójkąta w prawym górnym rogu.

Wyświetlanie przesunięć układu

Przesunięcia układu możesz wyświetlić na ścieżce Przesunięcia układu. Zmiany są wyświetlane jako fioletowe diamenty i ugrupowane w clusters (fioletowe linie) na podstawie ich bliskości na osi czasu.

Aby wyróżnić element, który spowodował przesunięcie układu w widocznym obszarze, najedź na odpowiedni diament.

Aby wyświetlić więcej informacji o przesunięciach układu na karcie Podsumowanie, w tym o czasach, wynikach, elementach i potencjalnych przyczynach, kliknij odpowiedni diament lub klaster.

Więcej informacji znajdziesz w artykule Skumulowane przesunięcie układu (CLS).

Wyświetlanie animacji

Wyświetl animacje na ścieżce Animacje. Animacje mają nazwy odpowiadających im właściwości CSS lub elementów, np. transform lub my-element. Animacje, które nie są przeznaczone do kompozytowania, są oznaczone czerwonymi trójkątami w prawym górnym rogu.

Wybierz animację, aby wyświetlić więcej szczegółów na karcie Podsumowanie, w tym przyczyny niepowodzenia kompozycji.

Wyświetlanie aktywności GPU

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

Wyświetlanie aktywności związanej z pikselami

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

Analiza liczby klatek na sekundę (FPS)

W narzędziu DevTools można analizować liczbę klatek na sekundę na wiele sposobów:

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

Sekcja Ramki

W sekcji Klatki możesz sprawdzić, ile czasu zajęło wyświetlenie konkretnej klatki.

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

Ten przykład pokazuje etykietkę wyświetlaną po najechaniu kursorem na kadr.

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

1. Klatka nieaktywna (biała). Bez zmian.
2. Ramka (zielona). Renderowanie przebiega zgodnie z oczekiwaniami i w czasie.
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 zdarzyć na przykład wtedy, gdy główna nić wątku procesu renderowania (animacja kanwy) jest opóźniona, ale nić wątku kompozytora (przewijanie) działa prawidłowo.
4. Pominięta klatka (czerwona z gęstym wzorem ciągłej linii). Chrome nie może renderować ramki w rozsądnym czasie.

Ten przykład pokazuje etykietkę wyświetlaną po najechaniu kursorem na częściowo widoczny kadr.

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 nagrywania wydajności.

Obok nazwy ścieżki sieci znajduje się legenda z kolorami oznaczającymi typy żądań.

Żądania blokujące renderowanie 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 jest Render blocking.
• zestawienie czasów realizacji żądań (opisane poniżej).

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

Dodatkowo w panelu Skuteczność znajdziesz kartę Podsumowanie, która zawiera więcej informacji o żądaniu, m.in. pola Początkowa priorytetowa i (ostateczna) Priorytetowa. 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 za pomocą interfejsu Fetch Priority API.

Na karcie Podsumowanie znajdziesz też zestawienie czasów przetwarzania żądania.

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

Inny podział na etapy znajdziesz na karcie Sieć. Kliknij prawym przyciskiem myszy prośbę w śladzie Sieć lub jej adres URL na karcie Podsumowanie i kliknij Pokaż w panelu Sieć. Narzędzia dla deweloperów otwierają panel Sieć i wybierają odpowiednie żądanie. Otwórz kartę Czas trwania.

Oto, jak te 2 rodzaje podziału się ze sobą pokrywają:

• Lewa linia (|–) to wszystko do grupy zdarzeń Connection start włącznie. Innymi słowy, 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ć dane o 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 linia JS Heap na wykresie Pamięć.

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

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

Wykres wyświetla tylko wybrany fragment nagrania. W poprzednim przykładzie wykres Pamięć pokazuje tylko wykorzystanie pamięci na początku nagrywania, do około 1000 ms.

Wyświetlanie czasu trwania części nagrania

Podczas analizowania sekcji, np. Sieć lub Główna, czasami potrzebujesz dokładniejszej szacowanej długości trwania określonych 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 znacznik czasu 488.53ms u dołu wybranego fragmentu wskazuje czas trwania tego fragmentu.

Wyświetlanie zrzutu ekranu

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

Najedź kursorem na przegląd osi czasu, aby wyświetlić zrzut ekranu przedstawiający wygląd strony 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 dla programistów 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 ją wyróżnić 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ć obiekt wzdłuż osi Z, kliknij Tryb obracania .
• 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ę Wyświetlanie.

Wyświetlanie liczby klatek na sekundę w czasie rzeczywistym za pomocą miernika FPS

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.

Sprawdź statystyki renderowania klatek.

Wyświetlanie zdarzeń związanych z renderowaniem w czasie rzeczywistym za pomocą funkcji migania renderowania

Użyj migania farby, aby wyświetlić w czasie rzeczywistym wszystkie zdarzenia związane z malowaniem na stronie.

Zobacz Podświetlanie obszarów renderowania.

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

Użyj opcji Obrzeża warstwy, aby wyświetlić nakładkę obrzeża warstwy i płytek u góry strony.

Zobacz Krawędzie warstw.

Wykrywanie 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ą odbiorników zdarzeń związanych z przewijaniem, a które mogą mieć negatywny wpływ na wydajność strony. Narzędzia deweloperskie wyróżniają elementy, które mogą być potencjalnie problematyczne, na kolor zielony.

Zobacz Problemy z wydajnością przewijania.