Do analizowania skuteczności witryny użyj panelu Skuteczność.
Omówienie
Panel Wydajność umożliwia rejestrowanie profili wydajności procesora aplikacji internetowych. Analizuj profile, aby znaleźć potencjalne wąskie gardła wydajności i sposoby optymalizacji wykorzystania zasobów.
W panelu Skuteczność możesz:
- Zanotuj profil skuteczności.
- Zmień ustawienia nagrywania.
- Analiza raportu skuteczności
Obszerny przewodnik po zwiększaniu wydajności witryny znajdziesz w artykule Analizowanie wydajności środowiska wykonawczego.
Otwieranie panelu Skuteczność
Aby otworzyć panel Wydajność, otwórz Narzędzia deweloperskie i na zestawu kart u góry wybierz Wydajność.
Możesz też wykonać te czynności, aby otworzyć panel Wydajność za pomocą menu poleceń:
- Otwórz Narzędzia deweloperskie.
- Otwórz menu Command, naciskając klawisze:
- macOS: Command+Shift+P
- Windows, Linux, ChromeOS: Control+Shift+P
- Zacznij pisać
Performance panel, wybierz Pokaż panel wydajności i naciśnij Enter.
Rejestrowanie profilu skuteczności
Gdy wszystko będzie gotowe do nagrywania, w panelu Skuteczność pojawią się te opcje:
- Rejestrowanie wydajności środowiska wykonawczego
- Rejestrowanie wydajności wczytywania
- Robienie zrzutów ekranu podczas nagrywania
- Wymuszaj czyszczenie pamięci podczas nagrywania
- Zapisywanie nagrania
- Wczytywanie nagrania
- Czyszczenie nagrania
Zmień ustawienia przechwytywania
Ustawienia przechwytywania pozwalają zmienić sposób, w jaki Narzędzia deweloperskie rejestruje nagrania skuteczności, i udostępniać w raporcie dodatkowe informacje. Kliknij Ustawienia przechwytywania . Ustawienia, aby otworzyć menu Ustawienia przechwytywania.
Wybierz te opcje w menu Ustawienia przechwytywania:
- Wyłącz próbki JavaScript: wyłącza rejestrowanie stosów wywołań JavaScript wyświetlanych na ścieżce Main, które są wywoływane podczas nagrywania. Zmniejsza wymagania dotyczące wydajności.
- Włącz zaawansowaną instrumentację renderowania (powolne): rejestruje zaawansowaną instrumentację renderowania. Znacznie ogranicza skuteczność.
- Włącz statystyki selektora arkusza CSS (wolno): rejestruje statystyki selektora arkusza CSS. Znacznie ogranicza skuteczność.
- Ograniczanie wykorzystania procesora: symuluje spowolnienie procesora.
- Ograniczanie przepustowości sieci: symuluje zmniejszenie prędkości sieci.
- Równoczesność sprzętu: skonfiguruj wartość zgłaszaną przez
navigator.hardwareConcurrency.
Analizowanie raportu skuteczności
Pełną instrukcję korzystania z panelu Skuteczność znajdziesz w artykule Analizowanie nagrania skuteczności.
Poniżej przedstawiliśmy grupę tematów zawartych w przewodniku, a także inne przydatne dokumenty:
Aby dowiedzieć się, jak poruszać się po raporcie:
Aby dowiedzieć się, jak skupić się na tym, co jest ważne dla Twojego przepływu pracy:
- Zmienianie kolejności i ukrywanie utworów
- Ukrywanie funkcji i ich elementów podrzędnych na wykresie płomieniowym
- Tworzenie menu nawigacyjnego i przełączanie się między poziomami powiększenia
Aby dowiedzieć się więcej o kartach Od dołu, Drzewo połączeń i Dziennik zdarzeń:
Aby dowiedzieć się, jak analizować raport:
- Wyświetl aktywność w głównym wątku
- Czytanie wykresu płomieniowego
- Wyświetlanie zrzutu ekranu
- Wyświetlanie danych dotyczących pamięci
- Wyświetlanie fragmentu nagrania
- Analizowanie skuteczności selektora arkusza CSS podczas zdarzeń ponownego obliczania stylu
- Profilowanie wydajności Node.js za pomocą panelu Wydajność
- Analizowanie klatek na sekundę (FPS)
- Informacje o zdarzeniach na osi czasu
Zwiększ skuteczność dzięki tym panelom
Odkryj inne panele, które mogą pomóc Ci poprawić wydajność witryny: