Analiza wydajności środowiska wykonawczego

Kayce Basques

Wydajność w czasie działania to wydajność strony w trakcie jej działania, a nie wczytywania. W tym samouczku dowiesz się, jak analizować wydajność w czasie wykonywania za pomocą panelu Wydajność w Narzędziach deweloperskich w Chrome. 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. Uruchom 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. Wczytaj tę stronę w oknie incognito. To jest wersja demonstracyjna, którą chcesz profilować. 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 deweloperskie.

   

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 utworzyć 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 Twojej konfiguracji.

1. Klikaj Dodaj 10, aż niebieskie kwadraty zaczną poruszać się 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 Cofnij optymalizację. Niebieskie kwadraty poruszają się wolniej i z większym opóźnieniem.

Rejestrowanie wydajności w czasie działania

Po uruchomieniu zoptymalizowanej wersji strony niebieskie kwadraty poruszają się 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 wydajności podczas działania strony.

   

2. Odczekaj kilka sekund.

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

   

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

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ę

Podstawowym rodzajem danych do pomiaru wydajności animacji są liczba klatek na sekundę. Użytkownicy są zadowoleni, gdy animacje działają z prędkością 60 FPS.

1. Spójrz na wykres FPS. Gdy widzisz czerwony pasek powyżej FPS, oznacza to, że liczba klatek spadła tak niski, że może to negatywnie wpływać na wygodę użytkowników.

   

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 przydaje się do ręcznego analizowania postępów animacji.

   

4. W sekcji Ramki najedź kursorem na jeden z zielonych kwadratów. W DevTools możesz sprawdzić liczbę klatek na sekundę w przypadku danej klatki. Każda klatka jest prawdopodobnie znacznie poniżej docelowej wartości 60 FPS.

   

Oczywiście w przypadku takich wersji jest to dość oczywiste, że strona nie osiąga 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. Nie będziesz jej używać w tym samouczku.

Znajdź wąskie gardło

Po pomiarze i sprawdzeniu, czy animacja jest mało skuteczna, należy odpowiedzieć sobie na następujące pytanie: dlaczego.

1. Zwróć uwagę na kartę Podsumowanie. Jeśli nie wybierzesz żadnych zdarzeń, na tej karcie zobaczysz zestawienie aktywności. Strona renderowała się przez większość czasu. 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łań. 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. W nagraniu jest 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. Czerwony trójkąt oznacza ostrzeżenie, ż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 Uruchomiono ramkę animacji. 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. Pod zdarzeniem app.update znajduje się kilka zdarzeń w kolorze fioletowym. 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 Pierwsze unieważnienie układu. 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 środowiska wykonawczego, musisz się dowiedzieć, jak przeglądarka przekłada HTML, CSS i JS na piksele na ekranie. Najlepiej zacząć od karty Przegląd skuteczności renderowania. W artykule Anatomia kadru znajdziesz jeszcze więcej szczegółów.

Poza tym istnieje wiele sposobów na poprawę wydajności środowiska wykonawczego. 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, skomplikowanych układów i przerywników
• Uproszczenie złożoności malowania i zmniejszenie obszarów malowania
• Zachowaj właściwości tylko na poziomie kompozytora i zarządzaj liczbą warstw
• Debounce Your Input Handlers