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ę obliczanie stylu wynikowego.
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.
Czas ponownego obliczania stylu i opóźnienie interakcji
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. Ta strona koncentruje się na obliczaniu kosztów stylu, ale zmniejsza że część fazy renderowania jest związana z interakcją, co zmniejsza również czasu oczekiwania, w tym przy obliczaniu stylu.
Zmniejsz złożoność selektorów
Uproszczone nazwy selektorów mogą przyspieszyć styl strony obliczeń. Najprostsze selektory odwołują się do elementu w CSS za pomocą jedynie nazwa zajęć:
.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, którego elementem nadrzędnym jest
Element podrzędny minus-nth-plus-1 z klasą box?
Przetworzenie tego może zająć dużo czasu, w zależności od tego, jaki selektor zostanie użyty jako
jak i w danej przeglądarce. Aby to uprościć, możesz zmienić selektor
tylko nazwa 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 dlatego, że jego klasa pasuje.
Zmniejsz liczbę elementów z określaniem stylu
Inny aspekt związany ze skutecznością, często ważniejszy niż selektor to ilość pracy, która jest wymagana, gdy element się zmieni.
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
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ść.
- Kliknij przycisk Nagraj.
- Wejdź w interakcję ze stroną.
Gdy zatrzymasz nagrywanie, zobaczysz podobny obraz:
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.
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.
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. Za pomocą te informacje, aby znaleźć poprawkę w kodzie.
Użyj bloku, elementu lub modyfikatora
Podejście do kodowania, takie jak BEM (Block, Element, Modifier) i zwiększyć skuteczność. BEM zaleca wszystko ma jedną klasę, a tam, gdzie jest potrzebna hierarchia, hierarchię zostanie też wkomponowana w nazwę zajęć:
.list {
/* Styles */
}
.list__list-item {
/* Styles */
}
Jeśli potrzebujesz modyfikatora, jak w przykładzie z ostatnim przykładem podrzędnym, możesz dodać go jako to:
.list__list-item--last-child {
/* Styles */
}
BEM to dobry punkt wyjścia do organizacji CSS, zarówno z perspektywy, a także ze względu na uproszczenia wyszukiwania stylu.
Jeśli nie podoba Ci się BEM, istnieją inne sposoby kontaktu z CSS, ale oceń ich skuteczność i ergonomię, zanim zaczniesz.
Zasoby
Baner powitalny z filmu Unsplash, autorstwa Markus Spiske.