Jak pisać lepsze CSS z myślą o wydajności

W dzisiejszym poście zastanowimy się nad wyborem kodu, który możemy wprowadzić w CSS, aby poprawić wydajność witryny. Zanim jednak zagłębimy się w te wybory, przyjrzyjmy się najpierw bliżej procesowi renderowania stron internetowych, aby skupić się naproblematyczne (pod względem wydajności) obszary, które można rozwiązać za pomocą CSS.

Oto przybliżony przebieg operacji wykonywanych przez przeglądarkę po utworzeniu drzewa DOM:

Przelicz styl (i renderuj tworzenie drzewa). Przeglądarka oblicza style, które zostaną zastosowane do elementów w drzewie DOM. Drzewo renderowania jest później tworzone podczas odrzucania węzłów (elementów) z drzewa DOM, które nie mają być renderowane (elementy z Nie wyświetla się) i te, które są (pseudoelementy).
Układ (aka Reflow). Używając obliczonego stylu sprzed, przeglądarka oblicza położenie i geometrię każdego elementu na stronie.
Odmaluj. Po odwzorowaniu układu piksele są rysowane na ekranie.
Warstwy kompozytowe. Podczas malowania obraz może być wykonywany w różnych warstwach autonomicznie; warstwy te są następnie ostatecznie łączone.

Przejdźmy teraz do tego, co możemy zrobić w pierwszych trzech etapach operacji, aby napisać kody CSS o lepszej wydajności.

1. Zmniejsz obliczenia stylu

Jak wspomniano wcześniej, na etapie „Przelicz styl” przeglądarka oblicza style, które zostaną zastosowane do elementów. Aby to zrobić, przeglądarka najpierw wyszukuje wszystkie selektory w CSS, które wskazują na dany węzeł elementu w drzewie DOM. Następnie przechodzi przez wszystkie reguły stylu w tych selektorach i decyduje, które z nich mają być zastosowane do elementu.

Aby uniknąć kosztownych obliczeń w stylu, zredukować złożone i głęboko zagnieżdżone selektory aby przeglądarka mogła łatwiej dowiedzieć się, do którego elementu odnosi się selektor. Skraca to czas obliczeniowy.

Inne sposoby zatrudnienia obejmują zmniejszenie liczby reguł stylu (tam, gdzie to możliwe), usunięcie nieużywanego CSS i unikanie nadmiarowość i nadpisania, aby przeglądarka nie musiała przechodzić przez ten sam styl raz po raz podczas obliczeń stylu.

2. Zmniejsz przepływy

Zmiany przepływu lub układu w elemencie są bardzo „drogimi” procesami i mogą być jeszcze większym problemem, gdy element, który przeszedł zmiany układu, ma znaczną liczbę dzieci (ponieważ Przepływy spadają kaskadowo w dół hierarchii).

Przepływy są wyzwalane przez zmiany układu elementu, takie jak zmiany właściwości geometrycznych, takich jak wysokość lub rozmiar czcionki, dodawanie lub usuwanie klas do elementów, zmiana rozmiaru okna, aktywacja :wahać się, Zmiany DOM przez JavaScript itp.

Podobnie jak w kalkulacji stylów, aby zmniejszyć przepływy, unikaj złożonych selektorów i głębokie drzewa DOM (ponownie, ma to na celu zapobieganie nadmiernemu kaskadowaniu przepływów).

Jeśli musisz zmienić style układu komponentu na swojej stronie, celuj w style elementu, który jest najniższy w hierarchii elementów że komponent jest wykonany. Dzieje się tak, aby zmiany układu nie powodowały (prawie) żadnych innych przepływów.

Jeśli animujesz element, który przechodzi zmiany układu, wyjmij go z przepływu stron przez pozornie go pozycjonować, ponieważ Przepływ w elementach pozycjonowanych absolutnie nie wpłynie na pozostałe elementy na stronie.

Podsumować:

Elementy docelowe, które są niższe w drzewie DOM podczas zmiany układu
Wybierz absolutnie pozycjonowane elementy do animacji zmieniających układ
Unikaj animowania właściwości układu, gdy tylko jest to możliwe

3. Zmniejsz liczbę powtórek

Odmalowanie odnosi się do rysowania pikseli na ekranie i jest kosztownym procesem, podobnie jak Reflow. Powtórki mogą być wyzwalane przez Przepływy, przewijanie stron, zmiany właściwości, takich jak kolor, widoczność i krycie.

Aby uniknąć częstych i ogromnych przemalowań, używaj mniej właściwości, które powodują kosztowne przemalowania jak cienie.

Jeśli animujesz właściwości elementu, który może bezpośrednio lub pośrednio wywołać Odmalowanie, będzie to bardzo korzystne jeśli ten element jest w swojej warstwie zapobieganie wpływowi malowania na resztę strony i wywoływanie przyspieszenia sprzętowego. Przy akceleracji sprzętowej GPU podejmie się zadania zmiany animacji w warstwie, oszczędzając dodatkową pracę procesora przy przyspieszaniu procesu.

W niektórych przeglądarkach, nieprzezroczystość (o wartości mniejszej niż 1) i przekształcać (wartość inna niż Żaden) są automatycznie promowane do nowych warstw, a przyspieszanie sprzętowe jest stosowane do animacji i przejść. Preferowanie tych właściwości dla animacji jest więc dobre.

Na siłę promuj element do nowej warstwy i przejdź do akceleracji sprzętowej dla animacji istnieją dwie techniki:

Dodaj transform: translate3d (0, 0, 0); do elementu, zmuszając przeglądarkę do wyzwolenia przyspieszania sprzętowego dla animacji i przejść.
Dodaj ulegnie zmianie właściwość elementu, która informuje przeglądarkę o właściwościach, które prawdopodobnie zmienią się w elemencie w przyszłości. Uwaga: Sara Soueidan ma dogłębny i bardzo pomocny artykuł na ten temat w witrynie Dev.Opera.

Podsumować:

Unikaj drogich stylów, które powodują odmalowanie
Szukaj promocji warstwy i akceleracji sprzętowej dla mocnych animacji i przejść.

Zanotuj

(1) Do tej pory nie dotknęliśmy redukcji rozmiaru plików CSS. Wspomnieliśmy, że redukcja reguł stylu (i elementów DOM) powoduje znaczną poprawę wydajności z powodu jak bardzo przeglądarka będzie musiała działać mniej na proces obliczania stylów. W konsekwencji tego zmniejszenia kodu, pisanie lepszych selektorów i usuwanie nieużywanego CSS, rozmiar pliku zmniejszy się automatycznie.

(2) Zaleca się również nie wprowadzaj zbyt wielu następczych zmian w stylach elementu w JavaScript. Zamiast tego dodaj klasę do elementu (za pomocą JavaScript), który przechowuje nowe style, aby wprowadzić te zmiany - zapobiega to niepotrzebnym przepływom.

(3) Będziesz chciał unikać układania Thrashing jak również (wymuszone przepływy synchroniczne), które powstają w wyniku dostępu i modyfikacji właściwości układu elementów za pomocą JavaScript. Przeczytaj więcej o tym, jak to zabija tutaj wydajność.