W panelu Wydajność każde długotrwałe zadanie jest oznaczone czerwonym trójkątem w prawym górnym rogu i ostrzeżeniem na karcie Podsumowanie. Oznacza to, że w wątku głównym jest to czasochłonne zadania, które działają bardzo wolno:
W nagraniach występów niektóre z tych długotrwałych zadań mogą być zdarzeniami Ponownie oblicz styl. Zdarzenie Ponownie oblicz styl śledzi czas potrzebny przeglądarce na wykonanie tych czynności:
- Sprawdzenie elementów DOM na stronie pozwala znaleźć wszystkie reguły stylów CSS pasujące do danego elementu.
- Oblicz rzeczywisty styl każdego elementu na podstawie pasujących reguł stylów CSS.
Style CSS muszą być przeliczone ponownie za każdym razem, gdy zastosowanie reguł CSS uległo zmianie, na przykład gdy:
- Elementy są dodawane do DOM lub z niego usuwane.
- Zmienione zostaną atrybuty elementu, na przykład wartość klasy lub atrybutu identyfikator.
- Użytkownik wprowadza dane wejściowe (np. porusza myszą lub zmienia ostrość elementu), co może mieć wpływ na reguły
:hover.
Długotrwałe zdarzenia przeliczania stylu mogą być problematyczne dla wydajności i powodować długie opóźnienia prezentacji, które wpływają na interakcję z następnym wyrenderowaniem w witrynie. Jeśli znajdziesz długotrwałe zdarzenia Ponownie oblicz styl, możesz skorzystać z karty Statystyki selektora, aby dowiedzieć się, który z selektorów arkusza CSS zajmuje najwięcej czasu i spowalnia wydajność.
Karta Statystyki selektora zawiera statystyki selektorów reguł CSS, które były uwzględnione w co najmniej 1 zdarzeniu Ponownie oblicz styl w ramach nagrania skuteczności.
Rejestrowanie zrzutu wydajności z włączonymi statystykami selektora
Aby wyświetlić statystyki selektorów reguł CSS podczas długotrwałych zdarzeń Recalcrated Style (Przelicz ponownie styl), zanotuj zrzut wydajności z włączonym ustawieniem Selector Stats (Statystyki selektora).
Aby zarejestrować zrzut wydajności ze statystykami selektora:
Otwórz stronę internetową, na przykład stronę demonstracyjną Galerii zdjęć.
Otwórz Narzędzia deweloperskie i przejdź do panelu Wydajność.
W panelu Skuteczność kliknij przycisk ustawień Ustawienia przechwytywania i zaznacz pole wyboru Włącz statystyki selektora arkusza CSS.
Kliknij radio_button_checked Nagraj, uruchom scenariusz, który chcesz poprawić, a następnie kliknij radio_button_checked Zatrzymaj.
Następnie wyświetl statystyki selektora arkusza CSS zgodnie z opisem w następnych sekcjach.
Wyświetlanie statystyk selektora reguł CSS dla pojedynczego zdarzenia
Aby wyświetlić statystyki selektorów reguł CSS, które są uwzględnione w pojedynczym zdarzeniu Ponownie oblicz styl:
Rejestruj log czasu wydajności z włączonymi statystykami selektora.
W nagraniu z występu znajdź zdarzenie Ponownie oblicz styl i kliknij je.
W dolnej sekcji panelu Skuteczność otwórz kartę Statystyki selektora.
Tabela selektorów arkusza CSS na karcie Statystyki selektora
Karta Statystyki selektora zawiera tabelę selektorów arkusza CSS. Tabela zawiera te informacje dla każdego selektora arkusza CSS:
| Kolumna | Opis |
|---|---|
| Upłynęło (ms) | Czas, przez jaki przeglądarka spędziła czas na dopasowaniu do tego selektora arkusza CSS. Jest on podawany w milisekundach (ms), gdzie 1 ms to 1/1000 sekundy. |
| Próby dopasowania | Liczba elementów, które wyszukiwarka próbowała dopasować z tym selektorem arkusza CSS. |
| Liczba zgodnych elementów | Liczba elementów, które mechanizm przeglądarki dopasował do tego selektora arkusza CSS. |
| Odsetek elementów, które nie pasują do powolnej ścieżki | Stosunek elementów, które nie pasowały do tego selektora arkusza CSS, do elementów, które próbował dopasować mechanizm przeglądarki, i które wymagały użycia mniej zoptymalizowanego kodu w celu dopasowania. |
| Selektor | Pasujący selektor arkusza CSS. |
| Arkusz stylów | Arkusz stylów CSS zawierający selektor arkusza CSS. |
Gdy skończysz, w panelu Skuteczność otwórz ustawienia Ustawienia przechwytywania i odznacz pole wyboru Włącz statystyki selektora arkusza CSS.
Wyświetlanie statystyk selektora reguł CSS dla wielu zdarzeń
Aby wyświetlić zbiorcze statystyki selektorów reguł CSS, które są uwzględniane w wielu zdarzeniach Ponownie oblicz styl, skopiuj kilka tabel Statystyki selektora do arkusza kalkulacyjnego w ten sposób:
Rejestruj log czasu wydajności z włączonymi statystykami selektora.
Znajdź pierwsze zdarzenie Oblicz ponownie styl, które Cię interesuje, a potem je kliknij.
W dolnej sekcji panelu Skuteczność otwórz kartę Statystyki selektora.
Kliknij prawym przyciskiem myszy tabelę statystyk selektora i wybierz Kopiuj tabelę.
Wklej tabelę do arkusza kalkulacyjnego, np. Arkuszy Google.
Powtórz poprzednie kroki w przypadku pozostałych zdarzeń Oblicz ponownie styl, które Cię interesują.
Gdy skończysz, w panelu Skuteczność otwórz ustawienia Ustawienia przechwytywania i odznacz pole wyboru Włącz statystyki selektora arkusza CSS.
Wyświetl zbiorcze statystyki selektora reguł CSS dla pełnego nagrania
Aby wyświetlić zbiorcze statystyki selektorów reguł CSS, które są uwzględniane w całym rejestrowaniu skuteczności:
Rejestruj log czasu wydajności z włączonymi statystykami selektora.
Kliknij pusty obszar wykresu płomieniowego, aby odznaczyć zdarzenia, które możesz wybrać.
Zaznacz cały zakres nagrywania. Aby to zrobić, kliknij dwukrotnie wykres procesora u góry panelu Wydajność.
W dolnej sekcji panelu Skuteczność otwórz kartę Statystyki selektora. U góry pojawi się nowy wiersz z danymi łącznymi dla wszystkich selektorów.
Gdy skończysz, w panelu Skuteczność otwórz ustawienia Ustawienia przechwytywania i odznacz pole wyboru Włącz statystyki selektora arkusza CSS.
Analizuj statystyki selektora arkusza CSS
Aby posortować dane w tabeli Statystyki selektora w kolejności rosnącej lub malejącej, kliknij nagłówek kolumny. Aby np. zobaczyć, które selektory arkusza CSS zajmują najwięcej czasu, kliknij nagłówek kolumny Upłynęło (ms).
Aby zwiększyć skuteczność swojej strony internetowej, skup się na selektorach arkusza CSS, które:
- Obliczenie zajęło dużo czasu (duża wartość Upłynęło (ms)).
- Wskazuje, która przeglądarka próbowała dopasować wiele razy (wysoka wartość Próby dopasowania).
- do których przeglądarka nie pasowała do wielu elementów (mała wartość Liczba dopasowań w porównaniu z wartością Próby dopasowania).
- Które mają wysoki odsetek elementów, które nie pasują do powolnej ścieżki.
Na przykład na poprzednim zrzucie ekranu:
- Pierwszy selektor arkusza CSS (
html body .ps[tooltip...) wymagał najwięcej czasu. - Mechanizm przeglądarki próbował dopasować ten selektor arkusza CSS 1104 razy, ale żadne elementy nie zostały dopasowane.
Dlatego ten selektor arkusza CSS jest pierwszym kandydatem do ulepszenia.
Spróbuj zmienić selektory arkusza CSS, tak aby obliczenia i dopasowywanie mniejszej liczby elementów na stronie zajmowały mniej czasu. Sposób ulepszenia selektorów arkusza CSS zależy od konkretnego przypadku użycia.
Powtórz czynności podane w tym samouczku, aby upewnić się, że zmiany spowodowały skrócenie czasu trwania zdarzenia Ponownie oblicz styl w kolumnie Upłynęło (ms).