Użyj Monitora wydajności, aby szybko sprawdzić wczytywanie i wydajność witryny w czasie działania.
Omówienie
Panel Monitorowanie skuteczności zawiera osi czasu z wykresami danych o skuteczności w czasie rzeczywistym. Kliknij dane, aby je wyświetlić lub ukryć. Następnie zobacz, jak wykres zmienia się, gdy wchodzisz w interakcje z aplikacją.
Monitor skuteczności śledzi te dane:
- Wykorzystanie procesora.
- Rozmiar stosu JavaScript.
- Łączna liczba węzłów DOM, detektorów zdarzeń JavaScript, dokumentów i ramek na stronie.
- Liczba ponownych obliczeń układów i stylów na sekundę.
Otwórz panel Monitorowanie wydajności
Aby otworzyć panel Monitorowanie wydajności:
- Otwórz Narzędzia deweloperskie.
- Otwórz menu Polecenia, naciskając:
- macOS: Command + Shift + P.
- Windows, Linux i ChromeOS: Control + Shift + P
- Zacznij wpisywać
Performance monitor, wybierz Pokaż monitor wydajności i naciśnij Enter. Narzędzia dla deweloperów wyświetlają panel Monitor wydajności u dołu okna.
Możesz też w prawym górnym rogu kliknąć Więcej opcji > Więcej narzędzi > Monitor wydajności.
Korzystanie z panelu Monitor wydajności
Monitor wydajności daje ogólne pojęcie o wydajności witryny w czasie działania.
Obserwowanie, jak zmieniają się wartości danych podczas interakcji z witryną, może ujawnić możliwości poprawy.
Przydatną funkcją Monitora skuteczności jest to, że pozostaje on widoczny podczas przełączania się między stronami. Jako programista front-endu możesz uniknąć problemów takich jak zwiększanie się liczby elementów układu, otwierając Monitor wydajności, przewijając witrynę i obserwując dane Elementy DOM oraz Układ/s.
Jeśli użytkownicy zgłaszają, że Twoja witryna wczytuje się powoli, monitor wydajności pomoże Ci zidentyfikować obszary problemowe.
Na przykład duży skok wykorzystania procesora może wskazywać na nieefektywne wykorzystanie kodu. Ogólnie rzecz biorąc, jeśli strona zawiera dużą liczbę obsług zdarzeń JS, warto przerobić kod i zredukować ich liczbę, aby zwolnić pamięć.
Jeśli dopiero zaczynasz analizować skuteczność, zalecamy najpierw użycie panelu Lighthouse, a potem dalsze badania za pomocą panelu Skuteczność lub Monitora skuteczności.