Analiza wydajności środowiska wykonawczego

Kayce Basques

Wydajność w czasie działania to wydajność strony podczas jej działania, a nie wczytywania. W tym samouczku dowiesz się, jak korzystać z panelu wydajności w Narzędziach deweloperskich w Chrome do analizowania wydajności w czasie działania. W ujęciu modelu RAIL umiejętności, których nauczysz się w tym samouczku, przydadzą się do analizowania faz odpowiedzi, animacji i bezczynności strony.

Rozpocznij

W tym samouczku użyjemy panelu Skuteczność, aby znaleźć wąskie gardło w sprawności strony w produkcji. Wykonaj te czynnoś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 wprowadzać zakłócenia w pomiarach skuteczności.

2. Otwórz tę stronę w oknie incognito. To jest wersja demonstracyjna, którą chcesz przetestować. Na stronie widać wiele małych 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 programistyczne.

   

Symulowanie procesora mobilnego

Urządzenia mobilne mają znacznie mniejszą moc procesora niż komputery stacjonarne i przenośne. Za każdym razem, gdy profilujesz stronę, używaj funkcji ograniczania obciążenia procesora, aby symulować wydajność strony na urządzeniach mobilnych.

1. W narzędziach dla deweloperów kliknij kartę Wydajność.
2. Upewnij się, że pole wyboru check_box jest włączone.
3. Kliknij Ustawienia rejestrowania ustawień. W DevTools znajdziesz ustawienia związane ze sposobem rejestrowania danych o skuteczności.

4. W polu CPU wybierz 4-krotne spowolnienie. DevTools ogranicza działanie procesora, tak aby było 4 razy wolniejsze niż zwykle.

   

Konfigurowanie wersji demonstracyjnej

Trudno jest stworzyć demonstrację wydajności w czasie wykonywania, która działałaby konsekwentnie dla wszystkich czytelników tej witryny. W tej sekcji możesz dostosować wersję demonstracyjną, aby była jak najbardziej zbliżona do zrzutów ekranu i opisów w tym samouczku, niezależnie od konkretnej konfiguracji.

1. Klikaj Dodaj 10, aż niebieskie kwadraty zaczną poruszać się wyraźnie wolniej niż wcześniej. Na komputerze wysokiej klasy może to zająć około 20 kliknięć.

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

3. Kliknij Anuluj optymalizację. Niebieskie kwadraty poruszają się wolniej i z większym opóźnieniem.

Rejestrowanie wydajności w czasie działania

Gdy uruchomisz zoptymalizowaną wersję strony, niebieskie kwadraty będą się poruszać szybciej. Dlaczego? Obie wersje mają przemieszczać każdy kwadrat o tę samą odległość w tym samym czasie. Aby dowiedzieć się, jak wykryć wąskie gardło w niezoptymalizowanej wersji, wykonaj nagranie w panelu Skuteczność.

1. W Narzędziach deweloperskich kliknij Rejestruj radio_button_checked. Narzędzia deweloperskie rejestrują dane o skuteczności podczas uruchamiania strony.

   

2. Odczekaj kilka sekund.

3. Kliknij Zatrzymaj. DevTools przerywa nagrywanie, przetwarza dane, a potem wyświetla wyniki w panelu Wydajność.

   

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

Analiza wyników

Po uzyskaniu nagrania wydajności możesz przeanalizować, jak słaba jest wydajność strony, i znaleźć jej przyczyny.

Analiza liczby klatek na sekundę

Głównym wskaźnikiem wydajności animacji jest liczba klatek na sekundę (FPS). Użytkownicy są zadowoleni, gdy animacje działają z prędkością 60 FPS.

1. Spójrz na wykres FPS. Gdy widzisz czerwony pasek nad FPS, oznacza to, że liczba klatek na sekundę spadła tak bardzo, że prawdopodobnie wpływa to negatywnie na komfort użytkownika.

   

2. Pod wykresem FPS zobaczysz wykres CPU. Kolory na wykresie Procesor odpowiadają kolorom na karcie Podsumowanie u dołu panelu Skuteczność. To, że wykres procesora jest w pełni wypełniony kolorem, oznacza, że podczas nagrywania procesor był maksymalnie obciążony. Jeśli zauważysz, że procesor jest maksymalnie obciążony przez długi czas, oznacza to, że musisz znaleźć sposób na zmniejszenie obciążenia.

   

3. Najedź kursorem myszy na wykres FPS, CPU lub NET. Narzędzia deweloperskie wyświetlają zrzut ekranu strony w danym momencie. Aby odtworzyć nagranie, przesuń mysz w lewo i w prawo. Nazywa się to przewijaniem i jest przydatne do ręcznej analizy postępu animacji.

   

4. W sekcji Ramki najedź kursorem na jeden z zielonych kwadratów. Narzędzia dla programistów pokazują liczbę klatek na sekundę dla danej klatki. Każda klatka jest prawdopodobnie znacznie poniżej docelowej wartości 60 FPS.

   

W tym przypadku jest oczywiste, że strona nie uzyskuje dobrych wyników. W rzeczywistych scenariuszach może to być jednak niejasne, dlatego warto mieć te wszystkie narzędzia do pomiarów.

Bonus: otwórz licznik FPS

Innym przydatnym narzędziem jest miernik klatek na sekundę, który dostarcza szacunków FPS w czasie rzeczywistym podczas uruchamiania strony.

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

3. W panelu Renderowanie włącz opcję Pokaż statystyki renderowania. W prawym górnym rogu widoku pojawi się nowa nakładka.

   

4. Wyłącz licznik FPS i naciśnij Escape, aby zamknąć panel Renderowanie. W tym samouczku nie będziesz go używać.

Znajdź wąskie gardło

Po zmierzeniu i sprawdzeniu, że animacja nie działa prawidłowo, musisz odpowiedzieć na pytanie: dlaczego?

1. Zwróć uwagę na kartę Podsumowanie. Jeśli nie wybierzesz żadnych zdarzeń, na tej karcie zobaczysz zestawienie aktywności. Strona spędziła większość czasu na renderowaniu. Ponieważ wydajność to sztuka robienia mniej pracy, Twoim celem jest skrócenie czasu renderowania.

   

2. Rozwiń sekcję Główna. Narzędzia dla programistów wyświetlają wykres aktywności w głównym wątku na przestrzeni czasu. Oś X przedstawia nagranie w ciągu czasu. Każdy słupek reprezentuje zdarzenie. Szersza belka oznacza, że zdarzenie trwało dłużej. Oś Y reprezentuje stos wywołania. Jeśli widzisz nałożone na siebie zdarzenia, oznacza to, że zdarzenia znajdujące się wyżej spowodowały zdarzenia znajdujące się niżej.

   

3. Nagranie zawiera dużo danych. Aby powiększyć pojedyncze zdarzenie Animation Frame Fired, kliknij i przytrzymaj myszkę nad sekcją Overview (Przegląd), która zawiera wykresy FPS, CPU i NET. Sekcja Główna i karta Podsumowanie wyświetlają informacje tylko o wybranej części nagrania.

   

   .

4. Zwróć uwagę na czerwony trójkąt w prawym górnym rogu zdarzeń Zadanie i zdarzeń układu. Gdy widzisz czerwony trójkąt, oznacza to, że może wystąpić problem związany z tym zdarzeniem. Czerwony trójkąt na Zadaniu oznacza, że było to długie zadanie.

5. Kliknij zdarzenie Ramka animacji została uruchomiona. Na karcie Podsumowanie znajdziesz teraz informacje o tym zdarzeniu. Kliknięcie linku obok Inicjowane przez spowoduje, że DevTools wyróżnią zdarzenie, które zainicjowało zdarzenie Animation Frame Fired. Zwróć też uwagę na link app.update @. Kliknięcie tego przycisku spowoduje przejście do odpowiedniego wiersza w kodzie źródłowym.

   

6. W ramach zdarzenia app.update występuje wiele zdarzeń o fioletowym kolorze. Gdyby były szersze, wyglądałyby tak, jakby na każdym z nich był czerwony trójkąt. Kliknij jedno z fioletowych zdarzeń Układ. Więcej informacji o zdarzeniu znajdziesz w kartach Podsumowanie i Wykresy. Właściwie jest to ostrzeżenie dotyczące wymuszonego przepływu danych (innego określenia układu).

7. Na karcie Podsumowanie kliknij link obok app.update @ w sekcji Prośba o ramkę animacji. Narzędzia deweloperskie przekierują Cię do wiersza kodu, który wymusił układ.

   

Uff... To sporo informacji, ale teraz masz już solidne podstawy dotyczące podstawowego procesu analizowania wydajności w czasie wykonywania. Dobra robota.

Bonus: analiza wersji zoptymalizowanej

Korzystając z poznanych wcześniej narzędzi i procesów, kliknij Optymalizuj w demo, aby włączyć zoptymalizowany kod, wykonać kolejne nagranie wydajności i przeanalizować wyniki. Od ulepszonej szybkości wyświetlania klatek po zmniejszenie liczby zdarzeń na diagramie płomienia w sekcji Główne widać, że zoptymalizowana wersja aplikacji wykonuje znacznie mniej pracy, co przekłada się na lepszą wydajność.

Dalsze kroki

Podstawą zrozumienia skuteczności jest model RAIL. Ten model pokazuje Ci dane o skuteczności, które są najważniejsze dla Twoich użytkowników. Więcej informacji znajdziesz w artykule Pomiar skuteczności za pomocą modelu RAIL.

Aby lepiej poznać panel Wydajność, ćwicz korzystanie z niego. Spróbuj przeprowadzić profilowanie własnych stron i przeanalizuj wyniki. Jeśli masz pytania dotyczące wyników, opublikuj pytanie na Stack Overflow z tagiem google-chrome-devtools. Jeśli to możliwe, dołącz zrzuty ekranu lub linki do stron, które można odtworzyć.

Aby zostać ekspertem w zakresie wydajności w czasie wykonywania, musisz się nauczyć, jak przeglądarka przekształca HTML, CSS i JS w piksele na ekranie. Najlepiej zacząć od karty Przegląd skuteczności renderowania. W artykule Anatomia kadru znajdziesz jeszcze więcej szczegółów.

Wreszcie, istnieje wiele sposobów na poprawę wydajności w czasie wykonywania. W tym samouczku skupiliśmy się na jednym konkretnym miejscu, w którym występuje problem z animacją, aby pokazać Ci panel Wydajność. Jest to jednak tylko jeden z wielu problemów, z którymi możesz się spotkać. Pozostała część serii dotyczącej wydajności renderowania zawiera wiele przydatnych wskazówek dotyczących poprawy różnych aspektów wydajności w czasie działania, takich jak:

• Optymalizacja wykonywania kodu JS
• Ograniczenie zakresu i złożoności obliczeń stylów
• Unikaj dużych, złożonych układów i trashes układu
• Upraszczanie złożoności malowania i zmniejszanie obszarów malowania
• Używanie tylko właściwości kompozytora i zarządzanie liczbą warstw
• Debounce Your Input Handlers