Analiza wydajności środowiska wykonawczego

Wydajność środowiska wykonawczego wskazuje wydajność strony podczas jej wczytywania, a nie wtedy, gdy jest uruchomiona. Z tego samouczka dowiesz się, jak korzystać z panelu wydajności Narzędzi deweloperskich w Chrome do analizy wydajności środowiska wykonawczego. Umiejętności zdobyte w tym samouczku przy użyciu 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. W trybie incognito Chrome działa bez zarzutu. Jeśli na przykład masz zainstalowanych dużo rozszerzeń, mogą one zakłócać pomiar skuteczności.

2. Wczytaj tę stronę w oknie incognito. To jest wersja demonstracyjna, którą będziesz profilować. Na stronie kilka małych niebieskich kwadratów przesuwających się w górę i w dół.

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

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

   

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

Symulowanie procesora mobilnego

Urządzenia mobilne mają znacznie mniej mocy procesora niż komputery stacjonarne i laptopy. Po każdym profilowaniu strony użyj ograniczania wykorzystania procesora, aby przeprowadzić symulację wydajności strony 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 . Narzędzia deweloperskie ujawniają ustawienia związane z przechwytywaniem danych o wydajności.

4. W polu Procesor wybierz Spowolnienie 2x. Narzędzia deweloperskie ograniczają procesor tak, aby był 2 razy wolniejszy niż zwykle.

   

   Rysunek 2. Ograniczanie wykorzystania procesora, zaznaczone na niebiesko

Skonfiguruj wersję demonstracyjną

Ciężko jest stworzyć demonstrację wydajności środowiska wykonawczego, która będzie działać spójnie dla wszystkich użytkowników tej witryny. W tej sekcji możesz dostosować wersję demonstracyjną, by mieć pewność, że jej działanie odpowiadają zrzutom ekranu i opisom dostępnym w tym samouczku, niezależnie od konfiguracji.

1. Klikaj Dodaj 10, aż niebieskie kwadraty przesuwają się znacznie wolniej niż dotychczas. Na zaawansowanych urządzeniach 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 stają się wolniejsze, a znowu pojawiają się więcej zacinania.

Rejestruj wydajność środowiska wykonawczego

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

1. W Narzędziach deweloperskich kliknij Record (Rekord) . Narzędzia deweloperskie przechwytują wskaźniki wydajności w trakcie uruchamiania strony.

   

   Rysunek 3. Profilowanie strony

2. Odczekaj kilka sekund.

3. Kliknij Zatrzymaj. Narzędzia deweloperskie zatrzymują rejestrowanie, przetwarzają dane, a potem wyświetlają wyniki w panelu Wydajność.

   

   Rysunek 4. Wyniki wyszukiwania w profilu

Wow, to przytłaczająca ilość danych. Nie martw się, za chwilę wszystko nabierze sensu.

Analiza wyników

Gdy masz zarejestrowaną wydajność strony, możesz zmierzyć jej niską wydajność i określić przyczyny takiej sytuacji.

Analizuj klatki na sekundę

Głównymi danymi do pomiaru wydajności każdej animacji są klatki na sekundę. Użytkownicy są zadowoleni, gdy animacje działają z szybkością 60 kl./s.

1. Spójrz na wykres FPS. Jeśli nad FPS zobaczysz czerwony pasek, oznacza to, że liczba klatek na sekundę spadła tak bardzo, ż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ę.

   

   Rysunek 5. Wykres liczby klatek na sekundę w kolorze niebieskim

2. Pod wykresem FPS zobaczysz wykres CPU. Kolory na wykresie Procesor odpowiadają kolorom na karcie Podsumowanie u dołu panelu Wydajność. Fakt, że wykres CPU jest pełen kolorów, oznacza, że procesor był maksymalnie obciążony podczas nagrywania. Kiedy zobaczysz, że procesor jest wyczerpywany przez dłuższy czas, to znaczy, że musisz znaleźć sposób na ograniczenie pracy.

   

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

3. Najedź kursorem myszy na wykres FPS, CPU lub NET. w Narzędziach deweloperskich wyświetla zrzut ekranu z wybranego momentu. Poruszaj myszą w lewo i w prawo, aby ponownie odtworzyć nagranie. Jest to tzw. przewijanie, które pomaga ręcznie analizować postęp animacji.

   

   Rysunek 7. Wyświetlanie zrzutu ekranu strony (obszar około 2000 ms nagrania)

4. W sekcji Klatki najedź kursorem na jeden z zielonych kwadratów. W Narzędziach deweloperskich wyświetla się liczba klatek na sekundę dla danej klatki. Liczba klatek na sekundę jest prawdopodobnie znacznie mniejsza niż dopuszczalna wartość 60 FPS.

   

   Rysunek 8. Najeżdżanie na ramkę

Oczywiście w przypadku tej prezentacji widać, że strona nie działa dobrze. Jednak w rzeczywistych sytuacjach nie jest to tak oczywiste, dlatego warto mieć wszystkie narzędzia do dokonywania pomiarów.

Bonus: otwórz miernik FPS

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

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

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

   

   Rysunek 9. Licznik FPS

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

Znajdź wąskie gardło

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

1. Zwróć uwagę na kartę podsumowania. Jeśli nie wybrano żadnych zdarzeń, ta karta zawiera zestawienie aktywności. Strona spędziła większość czasu na jej renderowaniu. Wydajność to sztuka wykonywania mniejszej liczby zadań, więc Twoim celem jest skrócenie czasu poświęcanego na renderowanie.

   

   Rysunek 10. Karta Podsumowanie, zaznaczona na niebiesko

2. Rozwiń sekcję Główne. Narzędzia deweloperskie wyświetlają wykres płomieniowy aktywności w wątku głównym w czasie. 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 skumulowane jedna nad drugą, oznacza to, że zdarzenia o największej wartości wywołały mniej zdarzeń.

   

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

3. Na nagraniu jest dużo danych. Jeśli chcesz powiększyć pojedyncze zdarzenie Animation Frameed, kliknij, przytrzymaj i przeciągnij kursor myszy na sekcji Przegląd, która zawiera wykresy FPS, CPU i NET. Sekcja Główne i karta Podsumowanie zawierają tylko informacje o wybranej części nagrania.

   

   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. Każdy czerwony trójkąt to ostrzeżenie, że z tym zdarzeniem może występować problem.

5. Kliknij zdarzenie Animacja uruchomienia ramki. Na karcie Podsumowanie znajdziesz teraz informacje o tym zdarzeniu. Zwróć uwagę na link Pokaż. Kliknięcie tego przycisku spowoduje, że Narzędzia deweloperskie wyróżniają zdarzenie, które zainicjowało zdarzenie Animation Frame Fired. Zwróć też uwagę na link app.js:94. Kliknij go, aby przejść do odpowiedniego wiersza w kodzie źródłowym.

   

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

6. W sekcji zdarzenia app.update znajduje się kilka wydarzeń w kolorze fioletowym. Gdyby były szersze, wygląda na to, że każda z nich ma 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ło się ostrzeżenie o wymuszonych przeformatowaniach (inne słowo oznaczające układ).

7. Na karcie Podsumowanie kliknij link app.js:70 w sekcji Wymuszony układ. W Narzędziach deweloperskich przejdziesz do wiersza kodu, który wymuszał układ.

   

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

Uff... Wymagało to dużo pracy, ale teraz masz solidne podstawy dla podstawowego przepływu pracy do analizy wydajności środowiska wykonawczego. Dobra robota!

Dodatkowo: przeanalizuj wersję zoptymalizowaną

Korzystając z poznanych procesów i narzędzi, kliknij Optymalizuj w wersji demonstracyjnej, aby włączyć zoptymalizowany kod, jeszcze raz zarejestrować skuteczność i przeanalizować 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 lepszą wydajność.

Dalsze kroki

Podstawą do 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.

Praktyka czyni mistrza, aby lepiej poznać panel Skuteczność. Spróbuj profilować własne strony i analizować wyniki. Jeśli masz pytania dotyczące wyników, otwórz pytanie w Stack Overflow oznaczone tagiem google-chrome-devtools. W miarę możliwości dołącz zrzuty ekranu lub linki do możliwych do odtworzenia stron.

Aby zostać ekspertem w zakresie wydajności środowiska wykonawczego, musisz nauczyć się, jak przeglądarka tłumaczy kod HTML, CSS i JS na piksele na ekranie. Najlepiej zacząć od sekcji Omówienie wydajności renderowania. Więcej szczegółów znajdziesz w artykule Anatomia ramki.

I wreszcie jest wiele sposobów na poprawę wydajności środowiska wykonawczego. Ten samouczek skupia się na jednym wąskim gardle animacji, aby umożliwić Ci skupienie się na panelu Wydajność, ale to tylko jedno z wielu wąskich gardła, z którymi możesz się spotkać. Pozostałe filmy 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:

• Optymalizacja wykonywania kodu JS
• Ogranicz zakres i złożoność obliczeń stylu
• Unikaj dużych i złożonych układów oraz niszczenia treści
• Prostsze malowanie i zmniejszanie obszarów malowanych
• Zachowaj właściwości tylko kompozytora i zarządzaj liczbą warstw
• Odbiór modułów obsługi