W panelu Wydajność każde długo trwające zadanie jest oznaczone czerwonym trójkątem w prawym górnym rogu i ostrzeżeniem na karcie Podsumowanie. W ten sposób informuje o pracach w wątku głównym, które są długotrwałe i mało wydajne:
W nagraniach skuteczności 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:
- Przeglądanie elementów DOM na stronie w celu znalezienia wszystkich reguł stylów CSS pasujących do danego elementu.
- Obliczanie rzeczywistego stylu każdego elementu na podstawie pasujących reguł stylów CSS.
Style CSS muszą zostać ponownie obliczone zawsze wtedy, gdy zastosowanie reguł CSS ulegnie zmianie, np. gdy:
- Elementy są dodawane do modelu DOM lub z niego usuwane.
- Zmieniają się atrybuty elementu, takie jak wartość atrybutu klasa lub identyfikatora.
- Użytkownik wprowadza dane wejściowe, np. ruch myszą lub zmiana zaznaczenia elementu, co może mieć wpływ na reguły
:hover.
Jeśli zauważysz długotrwałe zdarzenia Recalculation Style, możesz skorzystać z karty Statystyki selektora, aby sprawdzić, które z selektorów arkusza CSS potrzebują najwięcej czasu i spowalniają działanie.
Karta Statystyki selektora zawiera statystyki dotyczące selektorów reguł CSS, które były używane w co najmniej jednym zdarzeniu Oblicz ponownie styl w nagraniu skuteczności.
Rejestruj ślad wydajności z włączonymi statystykami selektora
Aby wyświetlić statystyki selektorów reguł CSS podczas długo trwających zdarzeń Recalculate Style (Ponownie oblicz styl), zapisz ślad wydajności z włączonym ustawieniem Selector Stats (Statystyki selektora).
Aby zarejestrować ślad wydajności ze statystykami selektora:
Otwórz stronę internetową, np. stronę demonstracyjną Galerii zdjęć.
Otwórz Narzędzia deweloperskie i przejdź do panelu Wydajność.
W panelu Wydajność kliknij przycisk ustawień Ustawienia przechwytywania i zaznacz check_box Włącz statystyki selektora arkusza CSS.
Kliknij radio_button_checked Rejestruj, 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ły CSS dla pojedynczego zdarzenia
Aby wyświetlić statystyki selektorów reguł CSS związanych z pojedynczym zdarzeniem Ponownie oblicz styl:
Zarejestruj ślad wydajności z włączonymi statystykami selektora.
Znajdź zdarzenie Ponownie oblicz styl w nagraniu z występu 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 o każdym selektorze arkusza CSS:
| Kolumna | Opis |
|---|---|
| Upłynęło (ms) | Czas, przez jaki przeglądarka dopasowywała się do tego selektora arkusza CSS. Czas jest podawany w milisekundach (ms), gdzie 1 ms to 1/1000 sekundy. |
| Próby meczu | Liczba elementów, które wyszukiwarka przeglądarki próbowała dopasować do tego selektora CSS. |
| Liczba zgodnych wyników | Liczba elementów, które wyszukiwarka przeglądarki dopasowała do tego selektora CSS. |
| Odsetek elementów niedopasowujących, które nie pasują do powolnej ścieżki | Stosunek elementów, które nie pasowały do tego selektora CSS, do elementów, które system przeglądarki próbował dopasować i które wymagały, aby przeglądarka używała mniej zoptymalizowanego kodu. |
| Selektor | Dopasowany 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 check_box Włącz statystyki selektora arkusza CSS.
Wyświetlanie statystyk selektora reguł CSS dla wielu zdarzeń
Aby wyświetlić zbiorcze statystyki selektorów reguł CSS związanych z wieloma zdarzeniami Oblicz ponownie styl, skopiuj kilka tabel Statystyki selektora do arkusza kalkulacyjnego w ten sposób:
Zarejestruj ślad wydajności z włączonymi statystykami selektora.
Znajdź pierwsze zdarzenie Ponownie oblicz styl, które Cię interesuje, a następnie 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 z innymi zdarzeniami Oblicz ponownie styl, które Cię interesują.
Gdy skończysz, w panelu Skuteczność otwórz ustawienia Ustawienia przechwytywania i odznacz pole check_box Włącz statystyki selektora arkusza CSS.
Wyświetl zbiorcze statystyki selektora reguł CSS dla całego nagrania
Aby wyświetlić zbiorcze statystyki selektorów reguł CSS związanych z całym rejestrowaniem skuteczności:
Zarejestruj ślad wydajności z włączonymi statystykami selektora.
Kliknij pusty obszar wykresu płomieniowego, aby odznaczyć zdarzenia, które można zaznaczyć.
Zaznacz cały zakres nagrywania. Aby to zrobić, u góry panelu Wydajność kliknij dwukrotnie wykres dotyczący procesora.
W dolnej sekcji panelu Skuteczność otwórz kartę Statystyki selektora. U góry pojawi się nowy wiersz z danymi o sumach wszystkich selektorów.
Gdy skończysz, w panelu Skuteczność otwórz ustawienia Ustawienia przechwytywania i odznacz pole check_box Włącz statystyki selektora arkusza CSS.
Analizowanie statystyk selektora arkusza CSS
Aby posortować dane w tabeli Statystyki selektora w kolejności rosnącej lub malejącej, kliknij nagłówek kolumny. Aby np. sprawdzić, które selektory arkusza CSS zajmują najwięcej czasu, kliknij nagłówek kolumny Upłynęło (ms).
Aby spróbować zwiększyć skuteczność swojej strony internetowej, skup się na selektorach arkusza CSS, które:
- Obliczenie trwało zbyt długo (wysoka wartość Upłynęło (ms)).
- które przeglądarka próbowała wiele razy dopasować (wysoka wartość Próby dopasowania).
- które w rzeczywistości nie pasowały do wielu elementów (niska wartość Match Count w porównaniu z wartością Próby dopasowania).
- Które z nich mają wysoki odsetek niedopasowanych ścieżek, które nie są dopasowane.
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 nie udało się dopasować żadnych elementów.
Dlatego ten selektor arkusza CSS jest pierwszym z nich, który warto ulepszyć.
Spróbuj zmienić selektory CSS, tak aby wymagały mniej czasu na obliczenie i dopasowanie mniejszej liczby elementów na stronie. Sposób ulepszania selektorów arkusza CSS zależy od konkretnego przypadku użycia.
Powtórz czynności opisane w tym samouczku, aby potwierdzić, że zmiany pomogły skrócić czas trwania zdarzenia Ponownie oblicz styl w kolumnie Upłynęło (ms).