Podsumowanie: Chromium automatycznie aktualizuje swoje funkcje akceleracji sprzętowej na potrzeby animacji SVG, przekształceń opartych na wartościach procentowych, a wkrótce także animacji koloru tła i ścieżki klipu.
Jeśli chodzi o wydajność animacji internetowych, pojawiają się raczej określenia „przyspieszona sprzętowo” i „przyspieszona przez procesor GPU”. Ale co to w ogóle oznacza? Style akcelerowane sprzętowo to takie, które do renderowania stylów wizualnych korzystają z GPU (GPU), a nie z procesora centralnego. Dzieje się tak, ponieważ GPU może szybciej renderować zmiany wizualne na stronie internetowej niż procesor.
Korzystanie z GPU do odciążania skomplikowanych przejść i animacji zapewnia płynniejszy obraz i mniej zacięć, ponieważ wątek główny nie ma wpływu na te animacje. Usuwając je z głównego wątku, omijają warstwę innych aktywnych skryptów na stronie, co spowalniałoby obraz i stwarzało zawinięcie.
Włącz przyspieszanie sprzętowe animacji
Wspomagane sprzętowo animacje są komponowane jako warstwy, co pomaga programistom uzyskać płynne animacje 60 FPS (klatki na sekundę), co zwiększa wydajność renderowania wizualnego. Obecnie istnieje kilka sposobów, aby określić i włączyć w internecie animacje i przejścia z akceleracją sprzętową:
- Użyj funkcji CSS
transformalbo przenieś wartościopacitylubfilter - Dodaj do elementu właściwość
will-change. - Utwórz animowany rysunek na płótnie w aplikacji
OffscreenCanvas - Utwórz rysunek 3D WebGL
opacity, filter i transform, ale background-color i clip-path wkrótce dołączą do listy. Jakie inne elementy są domyślnie przyspieszane sprzętowo w Chromium? W trakcie opracowywania pojawią się nowe funkcje, w tym animacje SVG, na które deweloperzy bardzo żądają.
Animacje SVG przyspieszone sprzętowo
SVG to świetne uzupełnienie każdej strony, a te interakcje z SVG mogą być teraz bardziej wydajne. Od Chromium 89 Chrome dołączy do przeglądarki Firefox, która domyślnie umożliwi akcelerację sprzętową w animacjach SVG. Co Ty, programista, musicie zrobić? Nic – zostanie ono zastosowane automatycznie w przypadku animacji SVG w Chromium 89 i nowszych wersjach.
Przykład
Przyjrzyjmy się różnicom między animacją SVG z włączoną akceleracją sprzętową i bez niej. Wskaźniki ładowania to często używane elementy interfejsu, np. ten widoczny na stronie facebook.com. Wskazuje on, że serwer wykonuje pracę na serwerze, gdy użytkownik czeka na odpowiedź. W przedstawionym tu przypadku odpowiedzią byłoby wczytanie dodatkowych wyników na pasku bocznym.
Po otwarciu Narzędzi deweloperskich możemy zacząć profilować i zobaczyć różnice między animacjami wspomaganymi przez procesor i GPU.
Jak widać po lewej stronie (Chromium 87), ponowne wyrenderowanie ma miejsce przy każdym animowaniu wskaźnika postępu (co odbywa się w sposób ciągły). Po prawej stronie nie ma opcji ponownego renderowania (Chromium 89 i Firefox). Możemy to sprawdzić w panelu renderowania w Narzędziach deweloperskich, gdy włączysz miganie farby.
Gdy przyjrzymy się bliżej panelowi Skuteczność, ponownie zauważysz ten efekt i jego wpływ na ogólną wydajność usługi internetowej. Pozwala to uniknąć całkowitego czasu renderowania i malowania animacji, co oznacza płynniejsze animacje i bardziej wydajne aplikacje. Facebook nie będzie udostępniać tego narzędzia wczytującego w formacie SVG, dopóki przeglądarka nie zacznie obsługiwać sprzętowego pliku SVG, jednak będzie miała większą elastyczność w zakresie wymagań dotyczących tworzenia motywów, skalowania i rozdzielczości oraz łatwiejszej obsługi.
Procent animacji
Zespół ds. interakcji udostępnia też obsługę animacji przekształcenia procentowego w Chromium 89. Animacje oparte na wartościach procentowych opisują interakcje z uwzględnieniem ruchu opartego na wartościach procentowych. Możesz na przykład przeskalować coś w górę o 20% lub wysunąć menu elastycznego paska bocznego poza ekran za pomocą polecenia translateX: -100%.
Animacje tego typu są dość powszechne, ale obecnie nie korzystają z akceleracji sprzętowej, ponieważ wcześniej nie udało nam się skomponować takich animacji. Wartości procentowe w przekształceniach zależą od rozmiaru ramki (tj.układu). Teraz jeśli rozmiar układu nie zmienia każdej klatki, przeglądarka może wstępnie obliczyć bezwzględne wartości przekształcenia i uruchomić je tak, jakby deweloper podał wartości w pikselach. Dobra wiadomość jest taka, że zespół Chromium pracuje nad tą funkcją, a wkrótce te typy animacji zostaną automatycznie skomponowane i przyspieszone sprzętowo.
Co dalej?
Te zaktualizowane animacje znacznie upraszczają stylizowanie stron internetowych. Jak wspomnieliśmy wyżej, nasz zespół zawsze
chętnie sprawdza, jakie nowe potrzeby pojawią się w internecie. Obecnie planujemy przekonwertować
background-color i clip-path, aby automatycznie używać akceleracji sprzętowej w kolejnych wersjach Chromium.
background-color ma priorytet ze względu na dużą liczbę wykorzystania przejść i efektów, a clip-path umożliwia znacznie bardziej wydajne efekty przejścia w internecie. Kiedy skuteczność i interaktywność
są zgodne z oczekiwaniami, każdy wygrywa.
Zdjęcie na okładkę: Siora Photography dla Unsplash.