Analizowanie skuteczności selektora arkusza CSS podczas zdarzeń ponownego obliczania stylu

Sofia Emelianova

Panel Wydajność oznacza każdą długotrwałą czynność czerwonym trójkątem w prawym górnym rogu i wyświetla ostrzeżenie na karcie Podsumowanie, aby wskazać, że główna nić zajmuje dużo czasu i ma niską wydajność:

W nagraniach dotyczących wydajności niektóre z tych długotrwałych zadań mogą być zdarzeniami Przelicz styl. Zdarzenie Ponowna obliczanie stylu śledzi czas potrzebny przeglądarce na wykonanie tych czynności:

• Przejrzyj elementy DOM na stronie, aby znaleźć wszystkie reguły stylu CSS pasujące do danego elementu.
• obliczyć rzeczywisty styl każdego elementu na podstawie pasujących reguł stylu CSS;

Style CSS trzeba ponownie obliczyć, gdy może się zmienić zastosowanie reguł CSS, na przykład:

• Elementy są dodawane do DOM lub z niego usuwane.
• Zmiana atrybutów elementu, np. wartości atrybutu klasy lub atrybutu identyfikatora.
• Użytkownik wykonuje działanie, np. porusza mysz lub zmienia fokus elementu, co może wpływać na reguły :hover.

Długotrwałe zdarzenia Przelicz styl mogą wpływać na wydajność i powodować długie opóźnienia w prezentacji, które wpływają na czas od interakcji do kolejnego wyrenderowania (INP) witryny. Jeśli zauważysz długotrwałe zdarzenia Ponownie oblicz styl, możesz na karcie Statystyki selektora sprawdzić, który z Twoich selektorów CSS zajmuje najwięcej czasu i spowalnia działanie.

Karta Statystyki selektora zawiera statystyki dotyczące selektorów reguł CSS, które były zaangażowane w co najmniej 1 zdarzenie Ponownie oblicz styl w zapisie wydajności.

Rejestrowanie zrzutu wydajności przy włączonych statystykach selektora

Aby wyświetlić statystyki selektorów reguł CSS podczas długotrwałych zdarzeń Ponowna obliczanie stylu, nagrywaj ślad wydajności z włączonym ustawieniem rejestrowania Statystyk selektora.

Wskazówka: Statystyki selektora są domyślnie wyłączone, ponieważ zwiększają nakład pracy przy nagrywaniu skuteczności. Pozostaw go włączonego, gdy chcesz sprawdzić wydajność zdarzeń Ponownie oblicz styl i innych informacji dotyczących renderowania.

Aby zarejestrować zrzut wydajności ze statystykami selektora:

1. Otwórz stronę internetową, na przykład stronę demonstracyjną Galerii zdjęć.

2. Otwórz Narzędzia deweloperskie i otwórz panel Skuteczność.

3. W panelu Wydajność kliknij ustawienia Ustawienia przechwytywania i zaznacz pole wyboru Włącz statystyki selektora arkusza CSS.

   

4. Kliknij radio_button_checked Nagrywanie, uruchom scenariusz, który chcesz ulepszyć, a potem kliknij stop_circle 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, które są zaangażowane w pojedyncze zdarzenie Ponownie oblicz styl:

1. Nagrywanie zrzutu wydajności przy włączonych statystykach selektora

2. Odszukaj w nagraniu z wydajnością zdarzenie Ponownie oblicz styl i kliknij je.

3. W dolnej części panelu Skuteczność otwórz kartę Statystyki selektora.

Tabela selektorów CSS na karcie Statystyki selektora

Karta Statystyki selektora zawiera tabelę selektorów arkusza CSS. Tabela zawiera te informacje o każdym selektorze CSS:

Kolumna	Opis
Upłynęło (ms)	Czas, jaki przeglądarka poświęciła na dopasowanie tego selektora arkusza CSS. Czas jest podany w milisekundach (ms), gdzie 1 ms to 1/1000 sekundy.
Próby dopasowania	Liczba elementów, które mechanizm przeglądarki próbował dopasować do tego selektora CSS.
Liczba zgodnych elementów	Liczba elementów, które mechanizm przeglądarki dopasował do tego selektora 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 przez ten mechanizm mniej zoptymalizowanego kodu.
Selektor	Selektor arkusza CSS, który został dopasowany.
Arkusz stylów	Arkusz stylów CSS zawierający selektor CSS.

Gdy skończysz, w panelu Wydajność otwórz ustawienia Ustawienia przechwytywania i odznacz pole wyboru Włącz statystyki selektora arkusza CSS.

Wyświetlanie statystyk selektora reguły CSS dla wielu zdarzeń

Aby wyświetlić zbiorcze statystyki selektorów reguł CSS, które są zaangażowane w wiele zdarzenia Ponownie oblicz styl, skopiuj do arkusza kalkulacyjnego wiele tabel Statystyki selektora w ten sposób:

1. Nagrywanie zrzutu wydajności przy włączonych statystykach selektora

2. Odszukaj pierwsze interesujące Cię zdarzenie Ponowna kalkulacja stylu i kliknij je.

3. W dolnej części panelu Skuteczność otwórz kartę Statystyki selektora.

4. Kliknij prawym przyciskiem myszy tabelę statystyk selektora i wybierz Kopiuj tabelę.

   

5. Wklej tabelę w arkuszu kalkulacyjnym, np. w Arkuszach Google.

6. Powtórz poprzednie kroki w przypadku innych interesujących Cię zdarzeń Ponownie oblicz styl.

Gdy skończysz, w panelu Wydajność otwórz ustawienia Ustawienia przechwytywania i odznacz pole wyboru Włącz statystyki selektora arkusza CSS.

Wyświetlanie zbiorczych statystyk selektora reguły CSS w przypadku całego nagrania

Aby wyświetlić zbiorcze statystyki selektorów reguł CSS, które są uwzględniane w całym zapisie wydajności:

1. Nagrywanie zrzutu wydajności przy włączonych statystykach selektora

2. Kliknij pusty obszar wykresu słupkowego, aby odznaczyć wybrane zdarzenie.

3. Wybierz cały zakres nagrywania. Aby to zrobić, kliknij dwukrotnie wykres procesora u góry panelu Wydajność.

4. W dolnej części panelu Skuteczność otwórz kartę Statystyki selektora. U góry pojawi się nowy wiersz z danymi dotyczącymi sumy dla wszystkich selektorów.

Gdy skończysz, w panelu Wydajność otwórz ustawienia Ustawienia przechwytywania i odznacz pole wyboru 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 na przykład sprawdzić, które selektory CSS zajmują najwięcej czasu, kliknij nagłówek kolumny Upłynęło (ms).

Aby zwiększyć wydajność strony internetowej, skup się na selektorach CSS, które:

• Długo trwało obliczenie (wysoka wartość Upłynęło (ms)).
• przeglądarka próbowała dopasować wiele razy (wysoka wartość Liczba prób dopasowania);
• przeglądarka nie dopasowała wielu elementów (niska wartość Liczba prób dopasowania 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:

• Najwięcej czasu zajął pierwszy selektor CSS (html body .ps[tooltip...).
• Silnik przeglądarki próbował dopasować ten selektor arkusza CSS 1104 razy, ale nie znalazł żadnych elementów.

Dlatego ten selektor CSS jest pierwszym kandydatem do ulepszenia.

Spróbuj zmienić selektory arkusza CSS, aby wymagały mniej czasu na obliczenia i dopasowywały mniej elementów na stronie. Sposób ulepszania selektorów CSS zależy od konkretnego przypadku użycia.

Powtórz czynności opisane w tym samouczku, aby sprawdzić, czy zmiany spowodowały skrócenie czasu trwania zdarzenia Przelicz styl w kolumnie Upłynęło (ms).

Uwaga: niektóre części tej strony to modyfikacje oparte na utworach stworzonych i udostępnionych przez firmę Microsoft oraz używanych zgodnie z warunkami opisanymi w międzynarodowej licencji Creative Commons Uznanie autorstwa 4.0. Oryginalna strona została przygotowana przez zespół Microsoft Edge, w tym przez Michaela Hoffmana, Patricka Brosseta, Joe Martina i Zohera Ghadyaliego.