Monitorowanie wydajności w animacjach CSS


(Virendra Singh) (22 kwietnia 2020 r.)

Animacja z użyciem JavaScript ? lub Animacja z użyciem CSS ?

To pytanie trafia do każdego programisty raz, prawdopodobnie dwa lub więcej razy w trakcie jego kariery technicznej.

Z biegiem czasu maniacy Javascript wymyślili wiele bibliotek do tworzenia animacji w przeglądarce i wszyscy wydaje się być przekonany do korzystania z tych bibliotek jako gotowego rozwiązania. Ale poczekaj, czy to właściwe rozwiązanie? Czy powinniśmy robić animację za pomocą JavaScript? A może możemy polegać na natywnej implementacji CSS, aby tworzyć animacje w lepszy i wydajniejszy sposób?

Ponieważ czytasz tego bloga, zakładam, że znasz animacje JavaScript. Przyjrzyjmy się więc szczegółowo „animacji opartej na CSS” i różnym odmianom animacji CSS wraz z ich wpływem na wydajność.

Podstawa animacji opiera się na niektórych właściwościach CSS, których często będziesz używać w animacjach opartych na CSS. implementacje.

pozycja: (bezwzględna / względna)

transformacja

krycie

lewa, prawa, góra, dół i znacznie więcej.

Zacznijmy od spojrzenia na wyniki dwóch eksperymentów z różnymi właściwościami CSS dla animacji.

(a) pozycja bezwzględna z lewej i górnej

(b) transform

Dodatkowo, dlaczego nie spróbujemy wyciągnąć wniosków na temat wydajności i czasu renderowania na podstawie tych eksperymentów?

Patrząc na te dwa przykłady, wydaje się, że podobne funkcjonalność została imp lemented pomimo stosowania różnych podejść. Jednak gdy mierzymy wskaźniki wydajności w narzędziu Chrome dla deweloperów, widzimy rzeczywistą różnicę w wydajności w obu przypadkach.

Zanim zagłębimy się w te dane, musimy zrozumieć, jak przeglądarka renderuje UI i wszystkie akcje, które wykonuje, gdy jakakolwiek aktualizacja ma miejsce w UI.

Zatem tworzenie interfejsu użytkownika zaczyna się od:

1) Oblicz style, które zostaną zastosowane do elementów (Przelicz styl)

2) Utwórz układ elementów i umieść je na ekranie (Układ)

3) Dodaj piksele do wszystkich utworzonych układów, bardziej polega na tworzeniu bitmapy dla każdej warstwy. GPU używa tej mapy bitowej do renderowania warstwy na ekranie (Paint)

4) Na koniec utwórz warstwy na ekranie, tworząc stos warstw. Widok z góry tego stosu będzie wyglądał jak kompletna strona internetowa, na której każdy element ma swoją własną pozycję (warstwy kompozytowe)

Tworzenie warstwy kompozytowej to miejsce, w którym procesor komunikuje się z GPU, aby obsłużyć animacja. Używając właściwości takich jak transformacja i krycie, możemy zmusić przeglądarkę do wykonania animacji przy użyciu GPU zamiast Procesor.

W jaki sposób GPU pomaga nam w płynnej animacji?

GPU to kolejna mała maszyna do obsługi naszej animacji i może obsłużyć dużą liczbę obliczeń interfejsu użytkownika.

Tak więc, gdy wyzwala się tworzenie warstwy kompozytowej, tworzy kolejną warstwę. To kolejny sposób na uniknięcie ponownego renderowania animowanego elementu i innych części elementów interfejsu użytkownika.

Na poniższym obrazku obie czerwone kulki wyglądają na tę samą warstwę. Ale kiedy przesuwamy tę warstwę w obrocie 3D, okazuje się, że Transform animacja ma kolejną warstwę, która została utworzona dla czerwonej kulki, zapewniając płynną animację.

GPU przechowuje to drzewo obiektów renderowania w pamięci i bez ponownego renderowania , może umieścić tę warstwę na innych. Ale w przypadku animacji w lewym górnym rogu ta sama warstwa jest renderowana wielokrotnie z powodu zmian w tych właściwościach. Jeśli sprawdzimy zachowanie tych dwóch właściwości CSS, zobaczymy, że obie właściwości left i top wpływają na układ, powodując również ponowne malowanie i operację kompozytu.

Przetłumacz vs U góry / Po lewej

Powyższa animacja piłki ma wyraźną różnicę między przetłumacz vs góra / lewo .

W przypadku góry / lewej animacja, piłka jest renderowana w każdej pozycji, aż osiągnie ostateczne miejsce docelowe, a gdy zacznie ponownie przesuwać się do pozycji początkowej, rozpoczyna część renderowania.

Uwaga: kolor fioletowy reprezentuje tworzenie układu czerwonej kuli, a kolor zielony jest używany do zapisywania pikseli.

Oba powyższe zdjęcia to zrzut ekranu przedstawiający skuteczność tłumaczenia w porównaniu z góra / lewo .

Podświetlając jedno zadanie każdego z nich, zaczynamy rozumieć że czynność wykonywana przez zadanie jest inna w obu przypadkach. W górnym / lewym przypadku zadanie wykonało utworzenie układu, malowanie i ponowne obliczenie stylu. W przypadku tłumaczenia jedno zadanie wykonywane przez GPU przenosi warstwę kompozytową bez renderowania czegokolwiek w DOM.

Dzięki mocy GPU utrzymujemy nasz główny wątek wolny. Pomaga nam to zwiększyć wydajność aplikacji, a nasz główny wątek jest zajęty renderowaniem układu.

Powyższy wykres metryki wydajności dostarcza więcej dowodów, wyjaśniając dokładny zakres, w jakim nasz główny wątek jest zajęty ponownym obliczaniem układu i stylu. Ten wykres stale odzwierciedla zmiany zachodzące w interfejsie użytkownika.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *