Informacje o funkcjach wydajności

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

W artykule Analizowanie wydajności w czasie działania znajdziesz samouczek, który pokazuje, jak analizować wydajność strony za pomocą Narzędzi deweloperskich w Chrome.

Ekran wskaźników na żywo

Gdy po raz pierwszy otworzysz panel Wydajność, zobaczysz ekran Wskaźniki na żywo, który zawiera natychmiastowe podsumowanie wydajności bieżącej strony z użyciem 3 Core Web Vitals.

Dane są aktualizowane w miarę interakcji ze stroną i przechodzenia do nowych stron, w tym miękkich nawigacji po stronie klienta w aplikacjach jednostronicowych, oznaczonych plakietką SOFT NAV. To dobry sposób na identyfikowanie problemów z wydajnością, zwłaszcza w przypadku wskaźników INP i CLS, jeśli występują tylko w określonych okolicznościach. Gdy problem z wydajnością będzie się powtarzał, możesz zarejestrować ślad, aby uzyskać więcej szczegółów i zdebugować podstawowy problem.

Funkcje ekranu wskaźników na żywo

Oprócz danych ekran Dane na żywo zawiera te funkcje:

• Zgromadzone dane z CrUX, jeśli są włączone w panelu Zgromadzone dane.
• Podsumowanie wszelkich istotnych różnic między danymi lokalnymi a danymi zgromadzonymi.
• Element LCP, nad którym można najechać kursorem, aby go wyróżnić na stronie.
• Szczegóły klastra CLS i typu INP
• więcej szczegółów po najechaniu kursorem na dane (np. podczęści LCP i INP oraz histogramy zgromadzone);
• Panele Interakcje i Przesunięcia układu, w których rejestrowana jest historia interakcji i przesunięć układu.
• Panel Dane zgromadzone, w którym można włączyć dane CrUX, szczegóły dotyczące okresu, którego dotyczą te dane, możliwość przełączania się między danymi o źródle i adresie URL (jeśli są dostępne) oraz między danymi o komputerach i urządzeniach mobilnych.
• Panel ustawień środowiska z wskazówkami dotyczącymi tego, jakiego urządzenia, procesora i ograniczania wykorzystania sieci używać na podstawie danych CrUX.

Więcej informacji znajdziesz w poście na blogu Monitorowanie lokalnej i rzeczywistej wydajności Core Web Vitals w Narzędziach deweloperskich.

Wyniki nagrywania

Możesz nagrywać czas działania lub wydajność wczytywania za pomocą przycisków w lewym górnym lub prawym dolnym rogu ekranu:

Rejestrowanie wydajności środowiska wykonawczego

Zarejestruj wydajność środowiska wykonawczego, gdy chcesz przeanalizować wydajność strony podczas jej działania, a nie wczytywania.

1. Otwórz stronę, którą chcesz analizować.
2. W Narzędziach deweloperskich kliknij kartę Wydajność.
3. Kliknij Nagraj .
4. Wejdź w interakcję ze stroną. Narzędzia deweloperskie rejestrują całą aktywność na stronie, która jest wynikiem Twoich interakcji.
5. Aby zatrzymać nagrywanie, kliknij ponownie Nagrywaj lub Zatrzymaj.

Rejestrowanie wydajności wczytywania

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

1. Otwórz stronę, którą chcesz analizować.
2. Otwórz panel Wydajność w Narzędziach deweloperskich.
3. Kliknij Nagraj i załaduj ponownie . Narzędzia deweloperskie najpierw przechodzą do about:blank, aby usunąć pozostałe zrzuty ekranu i ślady. Narzędzia deweloperskie rejestrują wskaźniki skutecznoś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 wystąpiła większość aktywności.

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

Robienie zrzutów ekranu podczas nagrywania

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

Aby dostosować wierność nagrywania wizualnego w ramach budżetów pamięci, otwórz Ustawienia przechwytywania i w menu Przechwytywanie zrzutów ekranu wybierz gotowe ustawienie rozmiaru i limitu liczby klatek.

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 przechwytywania , aby wyświetlić więcej ustawień związanych z tym, jak Narzędzia deweloperskie przechwytują nagrania dotyczące wydajności.

Wyłącz przykłady JavaScriptu

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

1. Otwórz menu Ustawienia przechwytywania . Zobacz Ustawienia nagrywania programu.
2. Zaznacz pole wyboru Wyłącz próbki JavaScriptu.
3. Nagraj stronę.

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

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

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

Ograniczanie przepustowości sieci podczas nagrywania

Aby ograniczyć przepustowość sieci podczas nagrywania:

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

W menu panelu Wydajność może też pojawić się zalecenie domyślnego ustawienia ograniczania lub ustawienia, które przybliża wrażenia użytkowników na podstawie danych z pola.

Ograniczanie wykorzystania procesora podczas nagrywania

Aby ograniczyć wykorzystanie procesora podczas nagrywania:

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

Ograniczanie jest uzależnione od możliwości komputera. Na przykład opcja 2x slowdown (Zwolnienie 2-krotne) sprawia, że procesor działa 2 razy wolniej niż zwykle. Narzędzia deweloperskie nie mogą w pełni symulować procesorów urządzeń mobilnych, ponieważ ich architektura bardzo różni się od architektury komputerów stacjonarnych i laptopów.

W menu panelu Wydajność może też pojawić się zalecenie domyślnego ustawienia ograniczania lub ustawienia, które przybliża wrażenia użytkowników na podstawie danych z pola.

Włącz statystyki selektora arkusza CSS

Aby wyświetlić statystyki selektorów reguł CSS podczas długotrwałych zdarzeń Ponowne obliczanie stylu:

1. Otwórz menu Ustawienia przechwytywania . Zobacz Wyświetlanie ustawień nagrywania.
2. Zaznacz pole wyboru Włącz statystyki selektora CSS.

Więcej informacji znajdziesz w artykule o tym, jak analizować wydajność selektora CSS podczas zdarzeń ponownego obliczania stylu.

Włączanie zaawansowanego instrumentowania renderowania

Aby wyświetlić szczegółowe instrumentowanie renderowania:

1. Otwórz menu Ustawienia przechwytywania . Zobacz Ustawienia nagrywania programu.
2. Zaznacz pole wyboru Włącz zaawansowane instrumenty do renderowania.

Aby dowiedzieć się, jak korzystać z informacji o renderowaniu, zapoznaj się z artykułami Wyświetlanie warstw i Wyświetlanie profilera renderowania.

Pokaż ścieżki niestandardowe

Umożliwia wyświetlanie w podsumowaniu śledzenia podsumowań ścieżek niestandardowych i grup ścieżek niestandardowych, które można dostosowywać za pomocą interfejsu DevTools Extensibility API.

Wyczyść poprzednie nagranie

Po nagraniu naciśnij Wyczyść nagranie , aby usunąć nagranie z panelu Skuteczność.

Analizowanie nagrania wydajności

Po zarejestrowaniu wydajności środowiska wykonawczego lub wydajności wczytywania panel Wydajność udostępnia wiele danych do analizy wydajności tego, co właśnie się wydarzyło.

Dodawanie adnotacji do nagrania i udostępnianie go

Więcej informacji znajdziesz w artykule Dodawanie adnotacji do wyników skuteczności i ich udostępnianie.

Uzyskiwanie przydatnych statystyk

Panel Skuteczność zawiera statystyki skuteczności, które są też dostępne w raportach Lighthouse. Te statystyki mogą sugerować sposoby poprawy wydajności i zawierać analizę z instrukcjami dotyczącą problemów z wydajnością, takich jak podczęści LCP i INP, problemy z wykrywaniem żądań LCP, usługi innych firm oraz starsze i zduplikowane zasoby JavaScriptu. Pełną listę znajdziesz w dokumentacji statystyk wydajności.

Obserwacje są przekazywane, gdy nie wykryto żadnych problemów. Na karcie Statystyki są one wymienione u dołu w rozwiniętej sekcji Przetworzone statystyki. Statystyki, które nie przeszły weryfikacji, są wymienione w osobnych sekcjach.

Aby wykorzystać statystyki:

1. Utwórz nagranie skuteczności.
2. Na pasku bocznym po lewej stronie panelu Wydajność otwórz kartę Statystyki, rozwiń różne sekcje, a następnie najedź kursorem na elementy i kliknij je. Panel Wydajność wyróżni odpowiednie zdarzenia w śladzie.

Poruszanie się po nagraniu

Aby ułatwić Ci poruszanie się po śladzie wydajności, gdy najedziesz na niego kursorem, panel Wydajność:

• Po najechaniu kursorem na Przegląd osi czasu wyświetla się pionowy znacznik, który obejmuje cały ślad wydajności.
• Wyróżnia zakres w przeglądzie osi czasu, gdy najedziesz kursorem na elementy na ścieżce Główna.

Aby dokładnie sprawdzić nagranie skuteczności, możesz wybrać jego fragment, przewinąć długi wykres płomieniowy, powiększyć i pomniejszyć widok oraz użyć menu nawigacyjnego, aby przechodzić między poziomami powiększenia.

Do nawigacji używaj skrótów klawiszowych

Aby szybko poruszać się po nagraniu za pomocą skrótów klawiszowych, najpierw wybierz preferowany styl nawigacji klawiaturą.

W prawym górnym rogu panelu kliknij Pomoc Pokaż skróty i wybierz jedną z tych opcji:

• Klasyczny: powiększanie za pomocą kółka myszy (touchpad w górę lub w dół) i przewijanie w pionie za pomocą Shift + kółko myszy.
• Nowoczesny: przewijanie w pionie kółkiem myszy, przewijanie w poziomie za pomocą klawisza Shift i kółka myszy oraz powiększanie za pomocą klawisza Command/Control i kółka myszy.

W oknie skrótów znajdziesz też listę dostępnych skrótów.

Wybieranie fragmentu nagrania

Pod paskiem działań panelu Wydajność 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. Skup się na ścieżce Główna lub dowolnej z jej sąsiednich ścieżek.
2. Użyj klawiszy W, A, S i D, aby odpowiednio powiększyć, przesunąć w lewo, pomniejszyć i przesunąć w prawo.

Aby wybrać fragment za pomocą trackpada:

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

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

Oś czasu umożliwia tworzenie wielu zagnieżdżonych ścieżek kolejno po sobie, zwiększanie poziomów powiększenia, a następnie swobodne przełączanie się między nimi.

Aby utworzyć i używać ścieżki:

1. W Przeglądzie osi czasu wybierz fragment nagrania.
2. Najedź kursorem na zaznaczenie i kliknij przycisk N ms zoom_in. Zaznaczenie rozszerzy się, aby wypełnić przegląd osi czasu. U góry Przeglądu osi czasu zacznie się tworzyć ścieżka nawigacyjna.
3. Aby utworzyć kolejną zagnieżdżoną ścieżkę, powtórz 2 poprzednie kroki. Możesz nadal zagnieżdżać menu nawigacyjne, o ile zakres wyboru jest większy niż 5 milisekund.
4. Aby przejść do wybranego poziomu powiększenia, kliknij odpowiedni element w ścieżce u góry Przeglądu osi czasu.

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

Przewijanie długiego wykresu płomieniowego

Aby przewinąć długi wykres płomieniowy na ścieżce Główna lub na dowolnej sąsiedniej ścieżce, kliknij i przytrzymaj, a następnie przeciągnij w dowolnym kierunku, aż zobaczysz to, czego szukasz.

Ignorowanie nieistotnych skryptów na wykresie płomieniowym

Aby lepiej skupić się na kodzie, możesz dodać nieistotne skrypty do listy ignorowanych fragmentów kodu.

Aby zignorować skrypty, wykonaj jedną z tych czynności:

• Na górnym pasku działań kliknij compress Pokaż okno ustawień listy ignorowanych fragmentów kodu i wpisz wyrażenie regularne w polu do wprowadzania danych. Wykres płomieniowy zastosuje nową regułę podczas pisania.
• Kliknij skrypt prawym przyciskiem myszy i wybierz Dodaj skrypt do listy ignorowanych fragmentów kodu. W panelu Skuteczność ten skrypt zostanie dodany do listy w sekcji kompresuj Pokaż okno ustawień listy ignorowanych fragmentów kodu.

W przypadku takich skryptów panel automatycznie zwinie nadmierne zagnieżdżenia i oznaczy je jako On ignore list (REGULAR_EXPRESSION).

W oknie kompresji Pokaż ustawienia listy ignorowanych fragmentów kodu możesz włączać i wyłączać reguły listy ignorowanych fragmentów kodu.

Aby usunąć skrypt z listy ignorowanych, kliknij go prawym przyciskiem myszy na wykresie płomieniowym i wybierz Remove script from ignore list (Usuń skrypt z listy ignorowanych) lub najedź na niego kursorem w sekcji compress Show ignore list settings dialog (Pokaż okno ustawień listy ignorowanych) i kliknij delete Remove (Usuń).

Narzędzia deweloperskie zapisują reguły listy ignorowanych fragmentów kodu, które dodasz w ustawieniach Ustawienia > Lista ignorowanych fragmentów kodu.

Aby skupić się tylko na skryptach własnych, zaznacz pole wyboru check_box Dim 3rd parties (Przyciemnij skrypty innych firm). Panel Skuteczność wyszarzy skrypty firm zewnętrznych.

Szukaj aktywności

Możesz wyszukiwać działania na ścieżce Główna i żądania na ścieżce Sieć.

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

Aby przełączać się między aktywnościami pasującymi do zapytania:

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

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

Aby zmodyfikować ustawienia zapytania:

• Kliknij match_case Uwzględniaj wielkość liter, aby zapytanie uwzględniało wielkość liter.
• Kliknij regular_expression Wyrażenie regularne, aby użyć wyrażenia regularnego w zapytaniu.

Aby ukryć pole wyszukiwania, kliknij Anuluj.

Zmienianie kolejności ścieżek i ukrywanie ich

Aby uporządkować ślad wydajności, możesz zmienić kolejność ścieżek i ukryć nieistotne w trybie konfiguracji ścieżek.

Aby przenieść i ukryć ścieżki:

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

Obejrzyj film, aby zobaczyć, jak to działa.

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

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

Użyj ścieżki Główna, aby wyświetlić aktywność, która wystąpiła w głównym wątku strony.

Kliknij zdarzenie, aby wyświetlić więcej informacji o nim na karcie Podsumowanie, w tym m.in. czas trwania (i czas trwania własny), link do odpowiedniej linii w skrypcie źródłowym, adres URL pochodzenia (z nazwą elementu, jeśli jest znana), ślad stosu (jeśli występuje) oraz podział czasowy na wykresie kołowym.

W panelu Skuteczność wybrane wydarzenie jest zaznaczone na niebiesko.

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

Rozróżnianie zdarzeń własnych i zdarzeń dostarczanych przez firmę zewnętrzną

Nadmierne poleganie na kodzie spoza witryny może negatywnie wpłynąć na wydajność wczytywania. Panel Skuteczność może pomóc Ci wizualnie odróżnić w śladzie zdarzenia własne od zdarzeń innych firm, dzięki czemu możesz podjąć bardziej świadomą decyzję o ograniczeniu lub opóźnieniu wczytywania kodu spoza witryny, aby nadać priorytet treściom ze swojej strony.

Aby skupić się tylko na wydajności kodu własnego:

1. Upewnij się, że w logu czasu wydajności ani na karcie Statystyki nie jest nic zaznaczone. Aby to zrobić, kliknij pusty obszar śladu.
2. Na pasku działań u góry zaznacz check_box Przyciemnij treści innych firm. Panel Skuteczność wyszarza zdarzenia związane z osobami trzecimi w śladzie skuteczności i pozostawia tylko zdarzenia własne.

Wyróżnianie zdarzeń za pomocą tabeli „Dane własne i innych firm”

W wybranym zakresie na Przeglądzie osi czasu, gdy nie jest wybrane żadne zdarzenie, karta Podsumowanie zawiera tabelę Usługi własne / usługi innych firm, która zawiera listę odpowiednich rozmiarów transferu i czasów głównego wątku:

• Podmiot własny oznaczony plakietką 1st party.
• Wszystkie wykryte podmioty zewnętrzne w wybranym zakresie, nieoznaczone.
• Rozszerzenia oznaczone plakietkami Extension.
• Inne elementy [unattributed].

Aby zobaczyć powiązane zdarzenia wyróżnione w logu czasu i pozostałe wyszarzone, najedź kursorem na elementy w tabeli. Aby pozostawić zdarzenia encji wyróżnione, wybierz je w tabeli. Aby usunąć podświetlenie, kliknij dowolne puste miejsce w logu czasu.

Aby otworzyć działania pogrupowane według tego elementu na karcie Oddolnie, najedź kursorem na element w tabeli i kliknij obok niego account_tree Oddolnie.

Interpretowanie wykresu płomieniowego

Panel Wydajność przedstawia aktywność głównego wątku na wykresie płomieniowym. Oś x przedstawia nagranie w czasie. Oś Y reprezentuje stos wywołań. Zdarzenia na górze powodują zdarzenia poniżej.

Ten przykład pokazuje wykres płomieniowy na ścieżce Main (Główna). Zdarzenie click spowodowało wywołanie funkcji anonimowej. Ta funkcja z kolei wywołała funkcję onEndpointClick_, która wywołała funkcję handleClick_ itd.

Panel Wydajność przypisuje skryptom losowe kolory, aby podzielić wykres płomieniowy i zwiększyć jego czytelność. W poprzednim przykładzie wywołania funkcji z jednego skryptu są oznaczone jasnoniebieskim kolorem. Wywołania z innego skryptu są oznaczone kolorem jasnoróżowym. Ciemniejszy żółty kolor oznacza aktywność skryptów, a fioletowe zdarzenie – aktywność renderowania. Te ciemniejsze żółte i fioletowe zdarzenia są spójne we wszystkich nagraniach.

Długie zadania są też wyróżnione czerwonym trójkątem, a część przekraczająca 50 milisekund jest zaznaczona na czerwono:

W tym przykładzie zadanie trwało ponad 400 milisekund, więc część reprezentująca ostatnie 350 milisekund jest zacieniona na czerwono, a pierwsze 50 milisekund nie jest.

Dodatkowo ścieżka Main (Główna) zawiera informacje o profilach procesora uruchamianych i zatrzymywanych za pomocą funkcji konsoli profile() i profileEnd(). Wywołanie console.profileEnd() w kodzie lub w Konsoli automatycznie otwiera panel Wydajność i wyświetla zarejestrowany ślad.

Aby ukryć szczegółowy wykres płomieniowy wywołań JavaScriptu, zobacz 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łówna mogą być widoczne strzałki łączące te inicjatory i wywołane przez nie zdarzenia:

• Unieważnienie stylu lub układu -> Ponowne obliczanie stylów lub Układ
• Żądanie klatki animacji -> Uruchomiono klatkę animacji
• Żądanie nieaktywnego wywołania zwrotnego -> Uruchom nieaktywne wywołanie zwrotne
• Zainstaluj licznik czasu -> Uruchomiono licznik czasu
• Utwórz WebSocket –> Wyślij... i Otrzymanie uzgodnienia połączenia WebSocket lub Zniszcz WebSocket
• Schedule postTask -> Fire postTask lub Abort postTask

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

Po wybraniu karty Podsumowanie wyświetlane są linki Inicjator dla inicjatorów i linki Zainicjowane przez dla zdarzeń, które zostały przez nich wywołane. Kliknij je, aby przełączać się między odpowiednimi zdarzeniami.

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

Aby uporządkować wykres płomieniowy w głównym wątku, 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:

   • 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 pojawi się przycisk menu arrow_drop_down z ukrytymi elementami podrzędnymi.

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 wykres płomieniowy, wybierz funkcję i naciśnij U lub kliknij prawym przyciskiem myszy dowolną funkcję i wybierz Zresetuj ślad.

Ignorowanie skryptów na wykresie płomieniowym

Aby dodać skrypt do listy ignorowanych fragmentów kodu, kliknij go 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 fragmentów kodu i dodaje do reguł Niestandardowe wykluczenie w ustawieniach Ustawienia > Lista ignorowanych fragmentów kodu. Ignorowane skrypty są zapisywane, dopóki nie usuniesz ich ze śladu lub z niestandardowych reguł wykluczania.

Wyświetlanie aktywności w tabeli

Po nagraniu strony nie musisz polegać wyłącznie na ścieżce Główna, aby analizować działania. Narzędzia deweloperskie udostępniają też 3 widoki tabelaryczne do analizowania aktywności. Każdy widok zapewnia inną perspektywę działań:

• Jeśli chcesz wyświetlić główne działania, które powodują najwięcej pracy, użyj karty Drzewo wywołań.
• Jeśli chcesz wyświetlić działania, 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ń.

Możesz kliknąć element w dowolnej z 3 tabel (a także w tabeli podmiotów zewnętrznych i własnych na karcie Podsumowanie), aby wyróżnić odpowiednie zdarzenia w śladzie i przyciemnić pozostałe podczas przeglądania śladu skuteczności.

Aby ułatwić Ci szybsze znajdowanie potrzebnych informacji, na wszystkich 3 kartach obok paska Filtr znajdują się przyciski filtra zaawansowanego:

• match_case Uwzględniaj wielkość liter.
• regular_expression 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ą odpowiednie deklaracje funkcji w plikach źródłowych. Dodatkowo, jeśli dostępne i włączone 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.

Aktywności główne

Oto wyjaśnienie pojęcia aktywności głównych, które jest wspomniane w sekcjach dotyczących kart Drzewo wywołań i Od dołu oraz Dziennika zdarzeń.

Działania główne to te, które powodują, że przeglądarka wykonuje jakąś pracę. Na przykład gdy klikniesz stronę, przeglądarka uruchamia aktywność Event jako aktywność główną. Event może wtedy spowodować wykonanie modułu obsługi.

Na wykresie płomieniowym ścieżki Główna u góry znajdują się działania główne. Na kartach Drzewo wywołań i Dziennik zdarzeń działania główne to elementy najwyższego poziomu.

Przykład działań głównych znajdziesz na karcie Drzewo wywołań.

Karta Drzewo wywołań

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

Karta Drzewo wywołań wyświetla tylko działania z wybranej części nagrania. Więcej informacji o wybieraniu fragmentów znajdziesz w artykule Wybieranie fragmentu nagrania.

W tym przykładzie elementy najwyższego poziomu w kolumnie Aktywność, takie jak Event, Paint i Composite Layers, to aktywności główne. Zagnieżdżenie reprezentuje stos wywołań. W tym przykładzie Event spowodował Function Call, co spowodowało button.addEventListener, co spowodowało b itd.

Czas własny to czas spędzony bezpośrednio na danej aktywności. Łączny czas to czas poświęcony na daną aktywność lub dowolną z jej aktywności podrzędnych.

Kliknij Czas własny, Czas całkowity lub Aktywność, aby posortować tabelę według tej kolumny.

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

Domyślnie w menu Grupowanie wybrana jest opcja Bez grupowania. Użyj menu Grupowanie, aby posortować tabelę aktywności według różnych kryteriów.

Karta Od dołu do góry

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

Na karcie Oddolnie wyświetlane są tylko działania z wybranego fragmentu nagrania. Aby dowiedzieć się, jak wybierać fragmenty, przeczytaj artykuł Wybieranie fragmentu nagrania.

Na wykresie płomieniowym ścieżki Main 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 pierwszą aktywnością na karcie Oddolnie jest wait. Na wykresie płomieniowym żółty kolor pod wywołaniami wait to w rzeczywistości tysiące wywołań Minor GC. Na karcie Od dołu widać, że kolejną najdroższą aktywnością jest Minor GC.

Kolumna Czas własny zawiera łączny czas spędzony bezpośrednio na danej aktywności we wszystkich jej wystąpieniach.

Kolumna Łączny czas zawiera łączny czas spędzony na danej aktywności lub na dowolnej z jej aktywności podrzędnych.

Tabela najbardziej obciążającego stosu

Po prawej stronie karty Drzewo wywołań lub Oddolnie kliknij right_panel_open Pokaż najcięższy stos, aby wyświetlić tabelę Najcięższy stos.

Ta tabela pokazuje, które elementy podrzędne wybranej aktywności były wykonywane najdłużej. Najedź kursorem na element w tabeli, aby zobaczyć odpowiadające mu zdarzenie wyróżnione na ścieżce Główna i przyciemnione pozostałe elementy.

Dzięki temu możesz wizualnie znaleźć w śladzie skuteczności zagnieżdżone działania ze stosu wywołań, które zajmują najwięcej czasu.

Karta Dziennik zdarzeń

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

Na karcie Dziennik zdarzeń wyświetlane są tylko działania z wybranego fragmentu nagrania. Więcej informacji o wybieraniu fragmentów znajdziesz w artykule Wybieranie fragmentu nagrania.

Kolumna Start Time (Czas rozpoczęcia) wskazuje moment rozpoczęcia danej aktywności względem początku nagrania. W tym przykładzie czas rozpoczęcia 1573.0 ms dla wybranego elementu oznacza, że aktywność rozpoczęła się 1573 ms po rozpoczęciu nagrywania.

Kolumna Czas własny pokazuje czas spędzony bezpośrednio na danym działaniu.

Kolumny Łączny czas pokazują czas spędzony bezpośrednio na danej aktywności lub na dowolnej z jej aktywności podrzędnych.

Kliknij Czas rozpoczęcia, Czas własny lub Czas całkowity, aby posortować tabelę według tej kolumny.

Aby filtrować aktywności według nazwy, użyj pola Filtr.

Użyj menu Czas trwania, aby odfiltrować działania, które trwały krócej niż 1 ms lub 15 ms. Domyślnie w menu Czas trwania jest ustawiona opcja Wszystkie, co oznacza, że wyświetlane są wszystkie działania.

Odznacz pola wyboru Loading (Wczytywanie), Scripting (Skrypty), Rendering (Renderowanie) lub Painting (Malowanie), aby odfiltrować wszystkie działania z tych kategorii.

Wyświetlanie znaczników skuteczności

W nakładce z pionowymi liniami na śladzie wydajności możesz zobaczyć ważne znaczniki wydajności, takie jak:

• Pierwsze wyrenderowanie treści (FCP)
• Największe wyrenderowanie treści (LCP)
• Zdarzenie DOMContentLoaded (DCL)
• Zdarzenie onload (L)

Najedź kursorem na nazwy znaczników u dołu ścieżki, aby zobaczyć ich sygnaturę czasową.

Wyświetlanie niestandardowych czasów

Na ścieżce Czasy możesz wyświetlić niestandardowe znaczniki wydajności, takie jak:

• performance.mark() połączeń. Poniżej widać pojedynczy znacznik z etykietką Rozpoczęcie wykonywania kodu JavaScript w 813, 44 ms.
• performance.measure() połączenie. Poniżej widać żółty zakres oznaczony jako Powolna interakcja.

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

Wyświetlanie interakcji

Aby wykryć potencjalne problemy z responsywnością, wyświetl interakcje użytkowników na ścieżce Interakcje.

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. Na osi czasu znajdź ścieżkę Interakcje.

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

Ścieżka Interakcje wyświetla też ostrzeżenia dotyczące interakcji do kolejnego wyrenderowania (INP) trwających dłużej niż 200 milisekund na karcie Podsumowanie i w etykietce wyświetlanej po najechaniu kursorem:

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

Wyświetlanie przesunięć układu

Wyświetl przesunięcia układu na ścieżce Przesunięcia układu. Przesunięcia są wyświetlane jako fioletowe romby i są pogrupowane w klastry (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ź kursorem na odpowiedni romb.

Aby zobaczyć więcej informacji o przesunięciu lub przesunięciach układu na karcie Podsumowanie, w tym czasy, wyniki, elementy i potencjalne przyczyny, kliknij odpowiedni romb 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 są nazywane odpowiednimi właściwościami lub elementami CSS, np. transform lub my-element. Animacje bez kompozycji 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 niepowodzeń kompozycji.

Wyświetlanie aktywności GPU

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

Wyświetlanie aktywności związanej z rastrami

Wyświetl aktywność rastrową w sekcji Pula wątków.

Analizowanie liczby klatek na sekundę (FPS)

Narzędzia deweloperskie udostępniają wiele sposobów analizowania liczby klatek na sekundę:

• W sekcji Klatki możesz sprawdzić, ile czasu zajęła konkretna klatka.
• Użyj licznika FPS, aby oszacować liczbę klatek na sekundę w czasie rzeczywistym podczas działania strony. Zobacz Wyświetlanie klatek na sekundę w czasie rzeczywistym za pomocą miernika FPS.

Sekcja Ramki

Sekcja Klatki informuje, ile czasu zajęło wyrenderowanie danej klatki.

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

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

Sekcja Ramki może zawierać 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 linii przerywanych). Chrome stara się renderować przynajmniej niektóre aktualizacje wizualne na czas. Na przykład w przypadku, gdy praca głównego wątku procesu renderowania (animacja canvas) jest opóźniona, ale wątek kompozytora (przewijanie) jest na czas.
4. Pominięta klatka (czerwona z gęstym wzorem linii ciągłych). Chrome nie może wyrenderować ramki w rozsądnym czasie.

Ten przykład pokazuje etykietkę, która pojawia się po najechaniu kursorem na częściowo wyświetloną ramkę.

Kliknij klatkę, aby wyświetlić więcej informacji o niej na karcie Podsumowanie. Narzędzia deweloperskie zaznaczą 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 Sieć znajduje się legenda z oznaczonymi kolorami typami żądań.

Żądania blokujące renderowanie są oznaczone czerwonym trójkątem w prawym górnym rogu.

Najedź kursorem na prośbę, aby wyświetlić etykietkę z tymi informacjami:

• Adres URL żądania i całkowity czas jego wykonania.
• priorytet lub zmiana priorytetu, na przykład Medium -> High;
• Określa, czy żądanie jest Render-blocking.
• Zestawienie czasu żądań, które opisujemy poniżej.

Gdy klikniesz żądanie, na ścieżce Sieć pojawi się strzałka wskazująca od inicjatora do żądania.

Dodatkowo w panelu Wydajność znajduje się karta Podsumowanie z dodatkowymi informacjami o żądaniu, m.in. polami Początkowy priorytet i (końcowy) Priorytet. Jeśli ich wartości się różnią, priorytet pobierania żądania zmienił się podczas nagrywania. Więcej informacji znajdziesz w artykule Optymalizowanie ładowania zasobów za pomocą interfejsu Fetch Priority API.

Karta Podsumowanie zawiera też podział czasowy żądania.

W tym przykładzie żądanie dotyczące www.google.com jest reprezentowane przez linię po lewej stronie (|–), pasek pośrodku z ciemną i jasną częścią oraz linię po prawej stronie (–|).

Jeśli jest dostępna, karta Podsumowanie zawiera też zestawienie czasu odpowiedzi serwera na żądania sieciowe, które implementują technologie renderowania po stronie serwera. W przypadku tych żądań panel Wydajność pobiera dane z nagłówka odpowiedzi Server-Timing.

Inne zestawienie czasu znajdziesz na karcie Sieć. Kliknij prawym przyciskiem myszy żądanie na ścieżce Sieć lub jego adres URL na karcie Podsumowanie i kliknij Pokaż w panelu Sieć. Narzędzia deweloperskie przekierują Cię do panelu Sieć i wybiorą odpowiednie żądanie. Otwórz kartę Czas.

Oto jak te 2 zestawienia odpowiadają sobie nawzajem:

• Lewa linia (|–) obejmuje wszystkie zdarzenia aż 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.
• Ciemna część paska to Content download.
• Prawa linia (–|) to czas oczekiwania na wątek główny. Nie jest ona widoczna na karcie Sieć > Czas.

Wyświetlanie wskaźników dotyczących pamięci

Zaznacz pole wyboru Pamięć, aby wyświetlić dane o pamięci z ostatniego nagrania.

Narzędzia deweloperskie wyświetlą nowy wykres Pamięć nad kartą Podsumowanie. Poniżej wykresu NET znajduje się też nowy wykres o nazwie HEAP. Wykres HEAP (Stos) zawiera te same informacje co linia JS Heap (Stos JS) na wykresie Memory (Pamięć).

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

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

Na wykresie wyświetlany jest tylko wybrany region nagrania. W poprzednim przykładzie wykres Pamięć pokazuje tylko wykorzystanie pamięci na początku nagrania, do około 1000 ms.

Wyświetlanie czasu trwania fragmentu nagrania

Podczas analizowania sekcji takich jak Sieć czy Główna czasami potrzebujesz dokładniejszego oszacowania czasu trwania niektórych zdarzeń. Przytrzymaj Shift, kliknij i przytrzymaj, a następnie przeciągnij w lewo lub w prawo, aby zaznaczyć fragment nagrania. U dołu zaznaczonego obszaru narzędzia dla programistów pokazują, ile czasu zajęło wykonanie tej części.

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 wygląd strony 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 Ramki. Narzędzia deweloperskie wyświetlają małą wersję zrzutu ekranu na karcie Podsumowanie.

Ten przykład pokazuje zrzut ekranu ramki 195.5ms na karcie Podsumowanie po kliknięciu jej w sekcji Ramki.

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

Przykład powiększonego zrzutu ekranu po kliknięciu miniatury na karcie Podsumowanie.

Wyświetlanie informacji o warstwach

Aby wyświetlić informacje o zaawansowanych warstwach dotyczące klatki:

1. Włącz zaawansowane instrumentowanie renderowania.
2. Wybierz ramkę w sekcji Ramki. 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 pokazuje warstwę #39, która jest podświetlona po najechaniu na nią kursorem.

Aby przenieść diagram:

• Kliknij Tryb przesuwania , aby przesuwać widok wzdłuż osi X i Y.
• Kliknij Tryb obracania , aby obrócić obiekt wokół osi Z.
• Kliknij Resetuj przekształcenie , aby przywrócić pierwotną pozycję diagramu.

Zobacz, jak działa analiza warstw:

Wyświetl program profilujący renderowanie

Aby wyświetlić zaawansowane informacje o zdarzeniu renderowania:

1. Włącz zaawansowane instrumentowanie renderowania.
2. Wybierz zdarzenie Paint na ścieżce Main.

Analizowanie wydajności renderowania za pomocą karty Renderowanie

Skorzystaj z funkcji na karcie Renderowanie, aby wizualizować skuteczność renderowania strony.

Otwórz kartę Renderowanie.

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

Statystyki renderowania klatek to nakładka, która pojawia się w prawym górnym rogu widocznego obszaru. Zapewnia on szacunkową liczbę klatek na sekundę w czasie rzeczywistym podczas działania strony.

Zobacz Statystyki renderowania klatek.

Wyświetlanie zdarzeń malowania w czasie rzeczywistym za pomocą funkcji Paint Flashing

Użyj opcji Migotanie renderowania, aby wyświetlić w czasie rzeczywistym wszystkie zdarzenia renderowania na stronie.

Zobacz Malowanie migające.

Wyświetlanie nakładki warstw za pomocą opcji Obramowania warstw

Użyj opcji Granice warstw, aby wyświetlić nakładkę z granicami warstw i kafelkami na stronie.

Zobacz Granice warstw.

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

Użyj problemów z wydajnością przewijania, aby zidentyfikować elementy strony, które mają detektory zdarzeń związane z przewijaniem, co może negatywnie wpływać na wydajność strony. Narzędzia deweloperskie zaznaczają potencjalnie problematyczne elementy na niebieskozielono.

Zobacz Problemy z wydajnością przewijania.