Monitor wydajności pozwala szybko ocenić obciążenie witryny i jej wydajność w czasie działania.
Przegląd
Panel Monitorowanie skuteczności zawiera oś czasu z wykresem danych o skuteczności w czasie rzeczywistym. Kliknij dane, aby je wyświetlić lub ukryć. Zobacz, jak wykres zmienia się podczas używania aplikacji.
Narzędzie do monitorowania wydajności śledzi następujące dane:
- Wykorzystanie procesora.
- Rozmiar sterty JavaScriptu.
- Łączna liczba węzłów DOM, detektorów zdarzeń JavaScript, dokumentów i ramek na stronie.
- Ponowne obliczanie układu i stylu na sekundę.
Otwieranie panelu Monitor wydajności
Aby otworzyć panel Monitor wydajności:
- Otwórz Narzędzia deweloperskie.
- Otwórz menu poleceń, naciskając:
- macOS: Command+Shift+P
- Windows, Linux, ChromeOS: Control+Shift+P
- Zacznij pisać
Performance monitor, wybierz Pokaż monitor wydajności i naciśnij Enter. W Narzędziach deweloperskich u dołu okna Narzędzi deweloperskich pojawi się panel Monitor wydajności.
Możesz też w prawym górnym rogu kliknąć more_vert Więcej opcji > Więcej narzędzi > Monitor wydajności.
Korzystanie z panelu Monitor wydajności
Monitorowanie wydajności dostarcza ogólnych informacji o czasie działania witryny.
Obserwowanie, jak wartości danych zmieniają się podczas korzystania z witryny, może ujawnić możliwości poprawy.
Przydatną funkcją Monitoru wydajności jest to, że pozostaje on niezmienny podczas nawigacji po stronie. Dlatego jako programista frontendu możesz uniknąć problemów takich jak miażdżenie układu, otwierając Monitor wydajności, przewijając witrynę i obserwując dane Węzły DOM i Układ/s.
Jeśli użytkownicy zgłaszają powolne wczytywanie witryny, monitor wydajności pomoże Ci zidentyfikować problematyczne obszary.
Na przykład duży wzrost wykorzystania procesora może wskazywać na nieefektywny kod. Jeśli strona zawiera dużą liczbę detektorów zdarzeń JS, warto refaktoryzować kod i zmniejszyć te liczby, aby zwolnić pamięć.
Jeśli dopiero zaczynasz swoją przygodę z analizą skuteczności, zalecamy skorzystanie najpierw z panelu Lighthouse, a potem dokładniejszą analizę za pomocą panelu Wydajność lub Monitoru wydajności.