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:
- Otwórz Narzędzia deweloperskie.
- Otwórz kartę Skuteczność.
- Zaznacz pole wyboru Statystyki selektora (opcjonalnie).
- Kliknij przycisk Nagraj.
- Wejdź w interakcję ze stroną.
Gdy zatrzymasz nagrywanie, zobaczysz podobny obraz:
![Narzędzia deweloperskie pokazujące obliczenia stylu.](https://web.dev/static/articles/reduce-the-scope-and-complexity-of-style-calculations/image/devtools-showing-style-ca-2cc07caa90f6e.png?authuser=7&hl=pl)
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.](https://web.dev/static/articles/reduce-the-scope-and-complexity-of-style-calculations/image/zooming-on-trouble-area-16c06721266c6.png?authuser=7&hl=pl)
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.](https://web.dev/static/articles/reduce-the-scope-and-complexity-of-style-calculations/image/getting-details-long-ru-995bd5d17169.png?authuser=7&hl=pl)
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źć.](https://web.dev/static/articles/reduce-the-scope-and-complexity-of-style-calculations/image/selector-stats.png?authuser=7&hl=pl)
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
- Statystyki selektora w Narzędziach deweloperskich w Chrome
- Unieważnienie stylu w Blink
- Interakcja do kolejnego wyrenderowania (INP)
- bibliotekę JavaScript
web-vitals
, - Mierzenie czasu ponownego przeliczania stylu w terenie
Baner powitalny z filmu Unsplash, autorstwa Markus Spiske.