Użyj monitora wydajności, aby szybko zorientować się w ruchu witryny i jej wydajności.
Przegląd
W panelu Monitor wydajności znajduje się oś czasu, na której w czasie rzeczywistym wyświetlane są dane o skuteczności. Kliknij dane, aby je wyświetlić lub ukryć. Następnie zobacz, jak wykres zmienia się w miarę używania aplikacji.
Narzędzie do monitorowania skutecznoś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.
- Układy i ponowne obliczenia stylów na sekundę.
Otwieranie panelu Monitora wydajności
Aby otworzyć panel Monitor wydajności:
- 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 monitor, wybierz Pokaż monitor wydajności i naciśnij Enter. U dołu okna Narzędzi deweloperskich wyświetli się panel Monitor wydajności.
Możesz też w prawym górnym rogu wybrać more_vert Więcej opcji > Więcej narzędzi > Monitor wydajności.
Korzystanie z panelu Monitora wydajności
Narzędzie do monitorowania wydajności daje ogólne pojęcie o wydajności witryny w czasie działania.
Obserwacja zmian wartości danych podczas korzystania z witryny może stwarzać możliwości poprawy.
Przydatną funkcją monitora wydajności jest to, że pozostaje on nieprzerwany przez całą nawigację na stronie. Jako programista frontendu możesz więc uniknąć takich problemów jak zniekształcanie układu. W tym celu otwórz Monitor wydajności, przewiń stronę internetową i obserwuj wskaźniki Węzły DOM i Układ/s.
Jeśli użytkownicy zgłaszają powolne wczytywanie się witryny, narzędzie do monitorowania wydajności pomoże zidentyfikować problematyczne obszary.
Na przykład duży wzrost wykorzystania procesora może wskazywać na niewydajny kod. Jeśli strona zawiera dużą liczbę detektorów zdarzeń JS, warto zrefaktoryzować kod i zmniejszyć te liczby w celu zwolnienia pamięci.
Jeśli dopiero zaczynasz analizować skuteczność, zalecamy skorzystanie z panelu Lighthouse, a następnie dalsze analizy za pomocą panelu Skuteczność lub Monitorowania skuteczności.