Zmniejsz zakres i złożoność obliczeń dotyczących stylu

Jeremy Wagner

JavaScript często powoduje zmiany wizualne. Czasami powoduje to zmienia się bezpośrednio przez manipulacje stylem, a czasami w wyniku obliczeń które mogą wywołać zmiany wizualne, takie jak wyszukiwanie lub sortowanie danych. Źle ustawiony czas lub długotrwały kod JavaScript może być częstą przyczyną problemów z wydajnością, starać się zminimalizować jej wpływ tam, gdzie to możliwe.

Obliczanie stylu

zmienianie DOM poprzez dodawanie i usuwanie elementów, zmienianie atrybutów, klas lub odtwarzanie animacji powoduje ponowne obliczanie stylów elementów przez przeglądarkę, w wielu przypadkach może to być też układ części lub całej strony. Ten proces nazywa się obliczenia stylu.

Przeglądarka rozpoczyna obliczanie stylów, tworząc zestaw pasujących selektorów, aby określać klasy, pseudoselektory i identyfikatory, które mają zastosowanie do danego elementu. Następnie przetwarza reguły stylu z pasujących selektorów i określa, ostatnie style elementu.

Rola ponownego obliczenia stylu w czasie oczekiwania na interakcję

Interaction to Next Paint (INP) to środowisko wykonawcze skupione na użytkownikach. wskaźnik wydajności, który pozwala ocenić ogólną responsywność strony na działania użytkownika. Mierzy czas oczekiwania na interakcję od momentu, w którym użytkownik wchodzi w interakcję ze stroną, do przeglądarka maluje kolejną ramkę, pokazując odpowiednie aktualizacje wizualne do interfejsu.

Ważnym składnikiem interakcji jest czas potrzebny na wyrenderowanie następnej ramki. Proces renderowania, który następuje w celu zaprezentowania następnej klatki, składa się z wielu części, Dotyczy to m.in. obliczania stylów strony występujących tuż przed układem, wyrenderowaniem i komponowanie treści. Ten przewodnik skupia się na obliczaniu kosztu stylu, ale zmniejsza którakolwiek część łącznego czasu renderowania interakcji zmniejsza też opóźnienia.

Zmniejsz złożoność selektorów

Upraszczanie selektorów arkusza CSS może przyspieszyć obliczenia stylu strony. Najprostsze selektory odwołują się do elementu w CSS za pomocą samej nazwy klasy:

.title {
  /* styles */
}

Jednak wraz z rozwojem każdego projektu potrzeba bardziej złożonego kodu CSS, z selektorami, które wyglądają tak:

.box:nth-last-child(-n+1) .title {
  /* styles */
}

Aby określić, jak te style mają się do strony, przeglądarka musi skutecznie zapytaj „czy to jest element z klasą title z elementem nadrzędnym klasy box, który jest elementem podrzędnym minus-nth-plus-1 swojego elementu nadrzędnego? Przetwarzam to może zająć trochę czasu. Aby to uprościć, zmień bardziej szczegółową nazwę klasy:

.final-box-title {
  /* styles */
}

Te nazwy klas zastępczych mogą wydawać się dziwne, ale sprawiają, że o wiele prostsze. W poprzedniej wersji, na przykład, aby przeglądarka wiedziała, Element jest ostatnim tego typu, musi najpierw wiedzieć wszystko o innych elementów, by określić, czy po nim pojawią się jakieś elementy, które mogą nth-last-child. Może to być znacznie wyższy koszt obliczeniowy niż dopasowania selektora do elementu tylko na podstawie nazwy jego klasy.

Zmniejsz liczbę elementów z określaniem stylu

Kolejna kwestia skuteczności, często ważniejsza niż selektor złożoność – ilość pracy, która jest wymagana po zmianie elementu.

Ogólnie rzecz biorąc, najgorszy koszt obliczania stylu obliczonych elementów to liczba elementów pomnożona przez liczbę selektora, ponieważ przeglądarka musi sprawdzić każdy element co najmniej raz pod kątem każdego stylu, aby zobaczyć, czy dopasowania.

Obliczenia stylu mogą być kierowane bezpośrednio na kilka elementów, zamiast unieważniać całą stronę. W przypadku nowoczesnych przeglądarek jest to zazwyczaj mniej istotne, ponieważ przeglądarka nie zawsze musi sprawdzać wszystkie elementy, na które może mieć wpływ zmiana. Starsze przeglądarki nie zawsze są przystosowane do takich zadań. Gdzie to możliwe, zmniejsz liczbę unieważnionych elementów.

Mierz koszt ponownego obliczenia stylu

Koszt przeliczenia stylu możesz zmierzyć na kilka sposobów z przeglądarki. Każdy z nich zależy od tego, czy chcesz mierzyć wyniki w przeglądarce w środowisku programistycznym, albo jeśli chcesz zmierzyć, jak długo ten proces dla prawdziwych użytkowników witryny.

Pomiar kosztu ponownego obliczania stylu w Narzędziach deweloperskich w Chrome

Jednym ze sposobów pomiaru kosztu ponownych obliczeń stylów jest użycie funkcji w Narzędziach deweloperskich w Chrome. Aby rozpocząć, wykonaj te czynności:

  1. Otwórz Narzędzia deweloperskie.
  2. Otwórz kartę Skuteczność.
  3. Zaznacz pole wyboru Statystyki selektora (opcjonalnie).
  4. Kliknij przycisk Nagraj.
  5. Wejdź w interakcję ze stroną.

Gdy zatrzymasz nagrywanie, zobaczysz podobny obraz:

Narzędzia deweloperskie pokazujące obliczenia stylu.
Raport w Narzędziach deweloperskich przedstawiający obliczenia stylu.

Pasek u góry to miniaturowy wykres płomieniowy, na którym również rysowane są klatki sekunda. Im bliżej końca aktywności znajduje się aktywność, tym szybciej ramki są malowane przez przeglądarkę. Jeśli wykres płomieni się wyrównuje z czerwonymi słupkami nad u góry i zmianami, długotrwałe klatki.

Powiększanie włączone obszar problemów w Narzędziach deweloperskich w Chrome w podsumowaniu aktywności wydajności w Narzędziach deweloperskich w Chrome.
Długie klatki w aktywności w Narzędziach deweloperskich streszczenie.

Długotrwałe klatki podczas interakcji, takiej jak przewijanie, są warte patrz. Jeśli zobaczysz duży fioletowy blok, powiększ widok aktywności i wybierz dowolną o nazwie Ponownie oblicz styl, by uzyskać więcej informacji czasochłonnego przeliczania stylów.

Uzyskiwanie szczegóły dotyczące długotrwałych obliczeń stylu, w tym ważne informacje, jako liczbę elementów, na które wpływa ponowne obliczanie stylu.
Długofalowe przeliczenie stylu wymaga tylko ponad 25 ms w podsumowaniu w Narzędziach deweloperskich.

Kliknięcie wydarzenia powoduje wyświetlenie stosu wywołań. Jeśli to renderowanie zostało spowodowane przez tag użytkownika, wywołuje kod JavaScript, który spowodował zmianę stylu. Pokazuje też liczbę elementów, na które wpływa zmiana – jest to nieco ponad 900 elementów. w tym przypadku elementów i czasie trwania obliczania stylu. Możesz użyć tej w kodzie, aby znaleźć poprawkę.

Jeśli zaznaczono pole wyboru Statystyki selektora w ustawieniach panelu wydajności, zanim wykonasz śledzenie, a potem na dole będzie miał dodatkową kartę o tej samej nazwie.

Tabela statystyk selektora arkusza CSS pojawi się w panelu wydajności w Narzędziach deweloperskich w Chrome. Ta tabela zawiera nagłówki i odpowiadające im dane, np. czas trwania, dopasowanie prób, liczbę dopasowań, odsetek niepasujących węzłów, selektory oraz w arkuszu stylów, w którym można je znaleźć.
Tabela statystyk selektora wyświetlana w panelu wydajności Chrome Narzędzia deweloperskie.

Panele te zawierają przydatne dane dotyczące względnego kosztu każdego selektora, umożliwiając pozwalające zidentyfikować drogie selektory arkusza CSS.

Więcej informacji znajdziesz w dokumentacji statystyk selektora arkusza CSS.

Mierz koszt ponownego obliczenia stylu dla rzeczywistych użytkowników

Jeśli chcesz się dowiedzieć, ile czasu potrzeba na ponowne obliczenie stylu prawdziwych użytkowników witryny: interfejs API Long Animation Frames daje dostęp do narzędzi do tego celu. Dane z tego interfejsu API zostały dodane do web-vitals biblioteka JavaScript, łącznie z czasem ponownego obliczania stylu.

Jeśli podejrzewasz, że opóźnienie prezentacji podczas interakcji ma udział w wskaźniku INP strony, musisz określić, ile czasu na ponowne obliczanie stylów na stronie. Więcej informacji: jak zmierzyć w terenie czas ponownego obliczania stylu.

Zasoby

Baner powitalny z filmu Unsplash, autorstwa Markus Spiske.