Analiza wydajności środowiska wykonawczego

Kayce Basques

Wydajność środowiska wykonawczego to wydajność strony podczas jej uruchamiania, a nie ładowania. Z tego samouczka dowiesz się, jak za pomocą panelu wydajności Narzędzi deweloperskich w Chrome analizować wydajność środowiska wykonawczego. Umiejętności zdobyte w tym samouczku w modelu RAIL przydadzą się podczas analizowania faz odpowiedzi, animacji i bezczynności na stronie.

Rozpocznij

W tym samouczku otwierasz Narzędzia deweloperskie na aktywnej stronie i używasz panelu Wydajność, aby znaleźć na tej stronie wąskie gardło wydajności.

  1. Otwórz Google Chrome w trybie incognito. Tryb incognito zapewnia, że Chrome działa w czystym stanie. Jeśli np. masz zainstalowanych wiele rozszerzeń, mogą one powodować zakłócenia w pomiarach skuteczności.

  2. Załaduj następną stronę w oknie incognito. To jest wersja demonstracyjna, którą chcesz profilować. Na stronie pojawi się kilka niebieskich kwadratów poruszających się w górę i w dół.

    https://googlechrome.github.io/devtools-samples/jank/

  3. Naciśnij Command+Option+I (Mac) lub Control+Shift+I (Windows, Linux), aby otworzyć Narzędzia deweloperskie.

    Prezentacja po lewej stronie i Narzędzia deweloperskie po prawej

    Rysunek 1. Prezentacja po lewej stronie i Narzędzia deweloperskie po prawej

Symulowanie procesora mobilnego

Urządzenia mobilne mają znacznie mniej moc obliczeniową niż komputery stacjonarne i laptopy. Przy każdym profilowaniu strony użyj funkcji ograniczania wykorzystania procesora, aby symulować jej wydajność na urządzeniach mobilnych.

  1. W Narzędziach deweloperskich kliknij kartę Wydajność.
  2. Upewnij się, że pole wyboru Zrzuty ekranu jest zaznaczone.
  3. Kliknij Ustawienia przechwytywania Ustawienia przechwytywania. Narzędzia deweloperskie ujawniają ustawienia związane ze sposobem rejestrowania danych o wydajności.

  4. W przypadku CPU wybierz 2x spowolnienie. Narzędzia deweloperskie ograniczają procesor do 2 razy wolniej niż zwykle.

    Ograniczanie wykorzystania procesora

    Rysunek 2. Ograniczanie wykorzystania procesora zaznaczone na niebiesko

Skonfiguruj wersję demonstracyjną

Ciężko jest stworzyć demonstrację wydajności środowiska wykonawczego, która będzie spójnie działać dla wszystkich czytelników tej witryny. W tej sekcji możesz dostosować wersję demonstracyjną, aby mieć pewność, że jej działanie jest stosunkowo spójne ze zrzutami ekranu i opisami widocznymi w tym samouczku, niezależnie od konkretnej konfiguracji.

  1. Klikaj Dodaj 10, aż niebieskie kwadraty przesuwają się znacznie wolniej niż wcześniej. Na zaawansowanych komputerach może to potrwać około 20 kliknięć.

  2. Kliknij Optymalizuj. Niebieskie kwadraty powinny poruszać się szybciej i płynniej.

  3. Kliknij Cofnij optymalizację. Niebieskie kwadraty przesuwają się wolniej i znów coraz bardziej się zacinają.

Rejestruj wydajność środowiska wykonawczego

Po uruchomieniu zoptymalizowanej wersji strony niebieskie kwadraty przesuwają się szybciej. Dlaczego? Obie wersje powinny przesuwać każdy kwadrat o tę samą ilość miejsca w tym samym czasie. Zrób nagranie w panelu Wydajność, aby dowiedzieć się, jak wykrywać wąskie gardło wydajności w wersji niezoptymalizowanej.

  1. W Narzędziach deweloperskich kliknij Record Rekord. Narzędzia deweloperskie rejestrują wskaźniki wydajności podczas uruchamiania strony.

    Profilowanie strony

    Rysunek 3. Profilowanie strony

  2. Odczekaj kilka sekund.

  3. Kliknij Zatrzymaj. DevTools zatrzymuje rejestrowanie, przetwarza dane, a następnie wyświetla wyniki w panelu Wydajność.

    Wyniki profilu

    Rysunek 4. Wyniki profilu

To przytłaczająca ilość danych. Nie martw się, wkrótce wszystko nabierze sensu.

Analiza wyników

Jeśli masz zarejestrowaną wydajność strony, możesz zmierzyć, jak niska jest wydajność strony, i znaleźć przyczyny.

Analizuj klatki na sekundę

Głównym wskaźnikiem pomiaru wydajności dowolnej animacji są klatki na sekundę. Użytkownicy cieszą się, gdy animacje działają z szybkością 60 kl./s.

  1. Spójrz na wykres FPS. Gdy nad FPS widzisz czerwony pasek, oznacza to, że liczba klatek spadła tak, że prawdopodobnie niekorzystnie wpływa to na wrażenia użytkownika. Ogólnie im wyższy zielony pasek, tym większa liczba klatek na sekundę.

    Wykres klatek na sekundę

    Rysunek 5. Wykres liczby klatek na sekundę (FPS) zaznaczony na niebiesko

  2. Pod wykresem FPS znajduje się wykres CPU. Kolory na wykresie Procesor odpowiadają kolorom na karcie Podsumowanie u dołu panelu Wydajność. Fakt, że wykres CPU jest pełny, oznacza, że procesor był wykorzystany podczas nagrywania. Gdy zauważysz, że procesor jest wyczerpywany przez dłuższy czas, oznacza to, że musisz znaleźć sposób na zmniejszenie pracy.

    Wykres dotyczący procesora i karta Podsumowanie

    Rysunek 6. Wykres dotyczący procesora i karta Podsumowanie zaznaczone na niebiesko

  3. Najedź kursorem myszy na wykresy FPS, CPU lub NET. w Narzędziach deweloperskich wyświetla zrzut ekranu z tym fragmentem strony. Przesuwaj mysz w lewo i w prawo, aby ponownie odtworzyć nagranie. Jest to tzw. przewijanie, które przydaje się do ręcznej analizy postępu animacji.

    Wyświetlanie zrzutu ekranu

    Rysunek 7. Zrzut ekranu strony (ok. 2000 ms nagrania)

  4. W sekcji Klatki najedź kursorem myszy na jeden z zielonych kwadratów. W Narzędziach deweloperskich zobaczysz liczbę klatek na sekundę dla danej klatki. Każda klatka prawdopodobnie mieści się znacznie poniżej docelowej wartości 60 FPS.

    najechanie na ramkę,

    Rysunek 8. Najeżdżanie na ramkę

Oczywiście w przypadku takiej wersji demonstracyjnej całkiem oczywiste, że strona nie działa zbyt dobrze. Jednak w rzeczywistych sytuacjach może to nie być takie oczywiste, dlatego posiadanie wszystkich tych narzędzi do dokonywania pomiarów jest bardzo przydatne.

Dodatkowo: otwórz miernik FPS

Innym przydatnym narzędziem jest miernik liczby klatek na sekundę, który dostarcza szacowaną liczbę klatek na sekundę w czasie rzeczywistym podczas działania strony.

  1. Naciśnij klawisze Command + Shift + P (Mac) lub Control + Shift + P (Windows, Linux), aby otworzyć menu poleceń.
  2. Zacznij pisać w menu poleceń Rendering i wybierz Pokaż renderowanie.

  3. Na karcie Renderowanie włącz Licznik FPS. W prawym górnym rogu widocznego obszaru pojawi się nowa nakładka.

    Wskaźnik FPS

    Rysunek 9. Wskaźnik FPS

  4. Wyłącz FPS Meter i naciśnij Escape, aby zamknąć kartę Rendering. Nie będziemy jej używać w tym samouczku.

Znajdź wąskie gardło

Po zmierzeniu i sprawdzeniu, że animacja nie jest skuteczna, możemy odpowiedzieć na kolejne pytanie: dlaczego?

  1. Zwróć uwagę na kartę podsumowania. Jeśli nie wybrano żadnego zdarzenia, na tej karcie jest wyświetlany podział aktywności. Strona spędziła większość czasu na renderowaniu. Wydajność to sztuka mniej pracy, dlatego Twoim celem jest skrócenie czasu poświęcanego na renderowanie.

    Karta Podsumowanie

    Rysunek 10. Karta Podsumowanie zaznaczona na niebiesko

  2. Rozwiń sekcję Główne. Narzędzia deweloperskie wyświetlają wykres płonny aktywności w wątku głównym na przestrzeni czasu. Oś X przedstawia nagranie w czasie. Każdy słupek przedstawia zdarzenie. Szerszy słupek oznacza, że zdarzenie trwało dłużej. Oś Y reprezentuje stos wywołań. Gdy widzisz zdarzenia ustawione wyżej, oznacza to, że niższe zdarzenia wywołały te zdarzenia o największej liczbie.

    Sekcja Główne

    Rysunek 11. Sekcja Główna, zaznaczona na niebiesko

  3. Na nagraniu jest dużo danych. Powiększ pojedyncze zdarzenie Animacja uruchomienia ramki, klikając, przytrzymując i przeciągając kursor myszy na obszarze Przegląd, który zawiera sekcje obejmujące wykresy FPS, CPU i NET. W sekcjach Główne i na karcie Podsumowanie znajdują się tylko informacje o wybranej części nagrania.

    Powiększenie pojedynczego zdarzenia uruchomienia ramki animacji

    Rysunek 12. Powiększenie pojedynczego zdarzenia uruchomienia ramki animacji

  4. Zwróć uwagę na czerwony trójkąt w prawym górnym rogu zdarzenia Animacja uruchomiona. Za każdym razem, gdy widzisz czerwony trójkąt, jest to ostrzeżenie, że z tym wydarzeniem może występować problem.

  5. Kliknij zdarzenie Uruchomienie ramki animacji. Na karcie Podsumowanie znajdziesz teraz informacje o tym zdarzeniu. Zwróć uwagę na link Pokaż. Kliknięcie tego przycisku spowoduje wyróżnienie w Narzędziach deweloperskich zdarzenia, które zainicjowało zdarzenie Animacja uruchomiona. Zwróć też uwagę na link app.js:94. Kliknięcie go spowoduje przejście do odpowiedniego wiersza w kodzie źródłowym.

    Więcej informacji o zdarzeniu Uruchomienie ramki animacji

    Rysunek 13. Więcej informacji o zdarzeniu Uruchomienie ramki animacji

  6. W sekcji app.update znajdziesz kilka fioletowych wydarzeń. Gdyby były szersze, wyglądało to, jakby na każdym z nich był czerwony trójkąt. Kliknij teraz jedno z fioletowych zdarzeń Układ. Więcej informacji o zdarzeniu znajdziesz na karcie Podsumowanie w Narzędziach deweloperskich. Pojawi się ostrzeżenie przed wymuszonym przeformatowaniem (czyli np. o układzie).

  7. Na karcie Podsumowanie kliknij link app.js:70 w sekcji Wymuszony układ. DevTools przeniesie do wiersza kodu, który wymusił układ.

    Wiersz kodu, który spowodował wymuszony układ

    Rysunek 13. Wiersz kodu, który spowodował wymuszony układ

Uff... Wymagało to dużo czasu, ale teraz masz już solidne podstawy do analizowania wydajności środowiska wykonawczego. Dobra robota!

Dodatkowo: analiza wersji zoptymalizowanej

Korzystając z poznanych wcześniej procesów i narzędzi, kliknij Optymalizuj w wersji demonstracyjnej, aby włączyć zoptymalizowany kod, jeszcze raz nagranie wydajności, a następnie przeanalizuj wyniki. Od ulepszonej liczby klatek po zmniejszenie liczby zdarzeń na wykresie płomieniowym sekcji Główna widać, że zoptymalizowana wersja aplikacji wykonuje znacznie mniej pracy, co przekłada się na większą wydajność.

Dalsze kroki

Podstawą zrozumienia skuteczności jest model RAIL. Dzięki temu modelowi poznasz dane o skuteczności, które są najważniejsze dla użytkowników. Więcej informacji znajdziesz w artykule Pomiar skuteczności za pomocą modelu RAIL.

Jeśli chcesz poczuć się pewniej w panelu Skuteczność, ćwicz czyni mistrzem. Spróbuj profilować własne strony i analizować wyniki. Jeśli masz pytania dotyczące wyników, otwórz pytanie na stronie Stack Overflow oznaczone tagiem google-chrome-devtools. Jeśli to możliwe, dołącz zrzuty ekranu lub linki do możliwych do odtworzenia stron.

Aby zostać ekspertem w zakresie wydajności działania, musisz nauczyć się, jak przeglądarka tłumaczy HTML, CSS i JS na piksele na ekranie. Najlepiej zacząć od Przeglądu wydajności renderowania. Dokument Anatomia Of A Frame zawiera jeszcze więcej szczegółów.

Jest też wiele sposobów na poprawę wydajności środowiska wykonawczego. Ten samouczek skupia się na jednym wąskim gardle animacji, aby umożliwić Ci zorientowanie się w panelu Wydajność. To jednak tylko jeden z wielu wąskich gardeł. Pozostałe materiały z serii na temat wydajności renderowania zawierają wiele przydatnych wskazówek dotyczących poprawy różnych aspektów wydajności środowiska wykonawczego, takich jak: