W kierunku wskaźnika płynności animacji

Dowiedz się więcej o pomiarze animacji, o klatkach animacji i ogólnej płynności strony.

Behdad Bakhshinategh

Jonathan Ross

Michal Mocny

Na niektórych stronach „zacinają się” lub „zatrzymać” podczas przewijania lub ani animacji. Chcemy powiedzieć, że nie są one łatwe. Do adresu tego typu problemów, zespół Chrome pracuje nad dodaniem większej liczby nasze narzędzia laboratoryjne do wykrywania animacji i wprowadzane w nich stałe ulepszenia do diagnostyki potoku renderowania w Chromium.

Chcemy opowiedzieć o ostatnich postępach, zaoferować konkretne wskazówki w zakresie narzędzi i omówić pomysły na wskaźniki jakości animacji w przyszłości. Jak zawsze, aby poznać Twoją opinię.

Omówimy w nim 3 główne tematy:

• Krótkie spojrzenie na animacje i klatki animacji.
• Obecne informacje o pomiarze ogólnej płynności animacji.
• Kilka praktycznych sugestii, które możesz dziś wykorzystać w narzędziach modułu.

Co to są animacje?

Animacje ożywiają zawartość Wzbudzając poruszanie tematów, zwłaszcza w odpowiedzi na pytania w interakcjach z użytkownikiem, animacje sprawiają, że wrażenia są bardziej naturalne, zrozumiałe i ciekawe.

Źle zaimplementowane animacje lub po prostu dodanie zbyt wielu animacji mogą pogarszają wrażenia i staną się niezbyt zabawnym. Na pewno wszyscy użytkownik dodał do interfejsu zbyt wiele „przydatnych” przejście które stają się niekorzystne w przypadku niskiej skuteczności. W związku z tym niektórzy użytkownicy preferuj ograniczony ruch, preferencja użytkownika których należy przestrzegać.

Uwaga: dowiedz się więcej o animacjach, w tym o tym, jak tworzyć skuteczne animacje i sprawdzać animacje za pomocą narzędzi dla programistów.

Jak działają animacje?

W skrócie: potok renderowania składa się z kilku kolejnych etapów:

1. Styl: oblicz stylów, które zostaną zastosowane do elementów.
2. Układ: wygeneruj geometrię i położenie każdego elementu.
3. Paint: wypełnij pikseli dla każdego elementu na warstwy.
4. Kompozyt: narysuj warstwy na ekran.

Istnieje wiele sposobów definiowania animacji, jednak wszystkie działają jedną z tych wartości:

• dostosowywanie układu, usług.
• Dostosowywanie renderowania usług.
• Dostosowywanie kompozytu usług.

Etapy te mają charakter sekwencyjny, więc ważne jest, aby zdefiniować animacje w w przypadku usług w dalszej perspektywie. Im wcześniejsza aktualizacja tym większe są koszty i mniejsze prawdopodobieństwo płynne. (Patrz: Renderowanie skuteczność ).

Choć animowanie właściwości układu jest wygodne, wiąże się to z kosztami nawet jeśli te koszty nie są od razu widoczne. Animacje powinny: w zakresie zmian właściwości złożonych, gdy tylko jest to możliwe.

Definiowanie deklaratywnych animacji CSS lub używanie stron internetowych Animacje, i upewnienie się, że animujesz dane złożone usług, to świetny pierwszy krok do zapewnienia płynności i wydajności animacji. Mimo to to samo nie gwarantuje płynności, ponieważ nawet skuteczne animacje internetowe mają limity skuteczności. Dlatego tak ważne są pomiary!

Czym są ramki animacji?

Aktualizacja wizualnej strony może trochę potrwać. Materiał wizualny powoduje utworzenie nowej klatki animacji, która jest ostatecznie renderowana na wyświetlaczu użytkownika.

Wyświetla aktualizacje po pewnym czasie, więc aktualizacje wizualne są grupowane. Wiele ekranów jest aktualizowany w ustalonych odstępach czasu, na przykład 60 razy na sekundę (tzn. 60 Hz). Niektóre nowoczesne wyświetlacze mogą mieć wyższe współczynniki odświeżania (częstotliwość 90–120 Hz staje się coraz bardziej powszechna). Wyświetlacze te często mogą się aktywnie dostosować możesz zmienić częstotliwość odświeżania, a nawet zaoferować zmienne liczby klatek.

Każda aplikacja (np. gra czy przeglądarka) musi przetworzyć wszystkie te elementy grupowane aktualizacje wizualne i generowanie wizualnej, kompletnej klatki animacji o terminie. Pamiętaj, że ten cel całkowicie różni się od innych ważnych zadań przeglądarki, takich jak szybkie ładowanie treści z sieci czy efektywne wykonywanie zadań JavaScriptu.

W pewnym momencie wprowadzanie wszystkich aktualizacji wizualnych w aplikacji w wyznaczonym terminie przypisanym przez wyświetlacz. W takim przypadku przeglądarka upuść ramkę. Ekran nie zgaśnie, po prostu się powtarza. Widzisz, tę samą wizualną aktualizację przez dłuższy czas – tę samą klatkę animacji, przedstawione przy poprzedniej ramce.

To często się zdarza. Nie zawsze jest to w ogóle zauważalne, treści statycznych lub podobnych do dokumentów, które są typowe na platformie internetowej konkretne. Utracone klatki stają się widoczne tylko wtedy, gdy zawierają ważne elementy wizualne aktualizacji, takich jak animacje, w przypadku których potrzebujemy stałego strumienia animacji. aby uzyskać płynny ruch.

Co wpływa na klatki animacji?

Programiści stron internetowych mogą w znacznym stopniu wpłynąć na szybkość i skutecznie renderuj i przedstawiaj aktualizacje wizualne.

Oto kilka przykładów:

• Nie używaj treści, które są zbyt duże lub wymagają dużych ilości zasobów, aby szybko je zdekodować na urządzeniu docelowym.
• Używanie zbyt wielu warstwy wymaga zbyt dużej pamięci GPU.
• Definiowanie nadmiernie złożonych stylów CSS lub animacji internetowych
• Użycie antywzorców projektowych, które wyłączają optymalizacje szybkiego renderowania.
• Zbyt dużo kodu JS w wątku głównym, co prowadzi do długich zadań blokujących wizualizację aktualizacje.

Skąd jednak wiedzieć, że klatka animacji przekroczyła termin, co spowodowało, ukryta klatka?

Jedną z możliwych metod jest użycie requestAnimationFrame() ma jednak kilka wad. requestAnimationFrame() lub „rAF”, informuje przeglądarkę, że chcesz wykonać animację, i prosi o użycie zrobić to przed kolejnym etapem renderowania w ramach potoku renderowania. Jeśli funkcja wywołania zwrotnego nie jest wywoływana w spodziewanym czasie, co oznacza, że Renderowanie nie zostało wykonane i pominięto co najmniej 1 klatkę. Przeprowadzając ankiety zliczając częstotliwość wywoływania rAF, możesz obliczać rodzaj „klatek na sekundę” (FPS).

Ostrzeżenie: poniższy kod działa antywzorcowo i zdecydowanie odradzamy jego stosowanie.

let frameTimes = [];
function pollFramesPerSecond(now) {
  frameTimes = [...frameTimes.filter(t => t > now - 1000), now];
  requestAnimationFrame(pollFramesPerSecond);
  console.log('Frames per second:', frameTimes.length);
}
requestAnimationFrame(pollFramesPerSecond);

Korzystanie z ankiet requestAnimationFrame() nie jest dobrym rozwiązaniem z kilku powodów:

• Każdy skrypt musi mieć własną pętlę odpytywania.
• Może to zablokować ścieżkę krytyczną.
• Nawet jeśli odpytywanie RAF jest szybkie, może zapobiec requestIdleCallback() przed ciągłym planowaniem długich blokad związanych z bezczynnością (blokuje przekraczają pojedynczą klatkę).
• Brak długich blokad związanych z bezczynnością uniemożliwia przeglądarce długotrwałe zadania (takie jak dłuższe czyszczenie pamięci i inne działania w tle czy pracy spekulacyjnej).
• Jeśli sondowanie jest włączone i wyłączone, pomijasz przypadki, w których budżet ramek została przekroczona.
• Ankiety otrzymają wyniki fałszywie pozytywne w przypadkach, gdy przeglądarka używa zmienną częstotliwość aktualizacji (np. ze względu na stan zasilania lub widoczność).
• Co najważniejsze, nie rejestruje wszystkich rodzajów animacji, aktualizacje

Zbyt dużo pracy w wątku głównym może wpłynąć na możliwość wyświetlania klatek animacji. Posłuchaj Jank Przykład, by zobaczyć, jak Animacja oparta na rAF, gdy w głównym wątku jest za dużo pracy (np. układu) powoduje porzucenie klatek i zmniejszenie liczby wywołań zwrotnych rAF oraz zmniejszenie liczby klatek na sekundę.

Gdy wątek główny się zacina, aktualizacje wizualne się zacinają. Ale zaciąg!

Wiele narzędzi pomiarowych kładzie nacisk na możliwość w wątku, aby zwiększyć szybkość wczytywania i płynność klatek animacji. Ale to nie wszystko. Na przykład:

Powyższy film przedstawia stronę, która okresowo dodaje długie zadania do głównej sekcji w wątku. Te długie zadania całkowicie obniżają zdolność strony do generowania określonych typów aktualizacji wizualnych, a w lewym górnym rogu możesz zobaczyć odpowiadający spadek liczby zgłoszonych klatek na sekundę (requestAnimationFrame()) do 0.

A pomimo tych długich czynności strona nadal płynnie się przewija. Ten jest to, że w nowoczesnych przeglądarkach przewijanie jest często podzielony na wątki, wyłącznie przez kompozytora.

W tym przykładzie widać, że jednocześnie zawiera wiele utraconych klatek na głównej nadal ma wiele pomyślnie przesłanych klatek przewijania wątku kompozytora. Po zakończeniu długiego zadania wyrenderowanie głównego wątku zostanie zaktualizowane. i tak nie ma do zaoferowania żadnych zmian wizualnych. Sondowanie RAF zasugerowało spadek liczby klatek do 0, ale wizualnie użytkownik nie dostrzegłby różnicy.

Jeśli chodzi o klatki w animacji, historia nie jest taka prosta.

Uwaga: wiele powodów, dla których długie zadania są nieprawidłowe, są rejestrowane przy użyciu dedykowanych interfejsów API wydajności, takich jak interfejs Long Tasks API czy Event Timing API. Dostępne są też funkcje takie jak isInputPending(), dzięki którym długie zadania w czasie bezczynności mogą być dodawane całkowicie z założenia i są bardzo korzystne.

Klatki animacji: ważne aktualizacje

Powyższy przykład pokazuje, że historia to nie tylko filmy, requestAnimationFrame()

Kiedy ważne są aktualizacje animacji i klatki animacji? Oto kilka kryteriów, które rozważamy, i chcielibyśmy dowiedzieć się więcej na temat:

• Aktualizacje wątku głównego i kompozytora
• Brakujące aktualizacje obrazu
• Wykrywam animacje
• Jakość lub ilość

Aktualizacje wątku głównego i kompozytora

Aktualizacje klatek animacji nie są wartością logiczną. Nie jest tak, że ramki mogą zawierać może zostać w całości pominięte lub zaprezentowane w całości. Jest wiele powodów, dla których animacja może być częściowo prezentowana. Innymi słowy, plik danych może jednocześnie mieć nieaktualnych treści oraz nowościach wizualnych, które dla każdego odbiorcy.

Najczęstszym przykładem jest sytuacja, w której przeglądarka nie może wygenerować nowego aktualizacja wątku głównego w terminie ramki, ale ma nowy wątek kompozytora (np. w przypadku wcześniejszego przewijania w wątkach).

Jednym z ważnych powodów, dla których warto używać animacji deklaratywnych do animacji złożonych jest zalecane, ponieważ pozwala to na wyświetlanie animacji całkowicie przez wątek kompozytora, nawet gdy wątek główny jest zajęty. Typy te można nadal skutecznie generować aktualizacje wizualne równoległe.

Z drugiej strony może się zdarzyć, że w końcu aktualizacja wątku głównego stanie się można prezentować, ale dopiero po upływie kilku terminów klatek. Tutaj przeglądarka otrzyma pewną aktualizację, ale może nie być najnowszą.

Ogólnie rzecz biorąc, uznajemy klatki zawierające nowe elementy wizualne, bez żadnych nowych aktualizacji wizualnych, jako częściową ramkę. Częściowe klatki są dość wspólne. W idealnej sytuacji częściowe aktualizacje zawierałyby przynajmniej najważniejsze zmian wizualnych, np. animacji, ale jest to możliwe tylko wtedy, na podstawie wątku kompozytora.

Brakujące aktualizacje obrazu

Innym rodzajem częściowej aktualizacji jest sytuacja, gdy multimedia takie jak obrazy nie zostały ukończone z dekodowaniem i rasteryzacją w czasie potrzebnym do wyświetlenia klatki.

Lub, nawet jeśli strona jest całkowicie statyczna, przeglądarki nadal mogą zalegać z renderowaniem. aktualizacji wizualnych podczas szybkiego przewijania. To ponieważ odwzorowanie pikseli Treści poza widocznym widocznym obszarem mogą zostać odrzucone w celu zaoszczędzenia pamięci GPU. it wyrenderowanie pikseli zajmuje więcej czasu, ale może to potrwać dłużej niż pojedyncza klatka renderuje wszystko po dużym przewinięciu, np. przesuwaniu palcem. czyli deskorolka.

Przy każdej możliwości renderowania klatek możesz śledzić, jaka część i pojawiały się na ekranie. Ocena kompetencji na wiele klatek (czyli w czasie) jest ogólnie nazywany przepustowością klatek.

Jeśli GPU jest naprawdę przeciążone, przeglądarka (lub platforma) może nawet zacząć ogranicza szybkość prób aktualizacji wizualnych i dlatego zmniejsza efektywne liczby klatek. Technicznie rzecz biorąc, może to zmniejszyć liczbę utraconych aktualizacji klatek, wizualnie nadal będzie wyświetlany z mniejszą przepustowością.

Jednak nie wszystkie typy niskiej przepustowości klatek są niewłaściwe. Jeśli strona jest w większości bezczynna brak aktywnych animacji, niska liczba klatek jest tak samo atrakcyjna ze względu na dużą liczbę klatek (i może zaoszczędzić baterię).

Kiedy przepustowość klatek ma znaczenie?

Wykrywam animacje

Duża przepustowość klatek ma znaczenie zwłaszcza w okresach z ważnymi ani animacji. Różne typy animacji zależą od aktualizacji wizualnych określonego wątku (główny, kompozytor lub instancja robocza), więc jego aktualizacja wizualna jest zależy od tego, czy wątek dostarczy aktualne informacje w wyznaczonym terminie. Mówimy, że dany wątek wpływa na płynność, gdy występuje aktywna animacja, zależy od aktualizacji wątku.

Niektóre rodzaje animacji łatwiej zdefiniować i wykryć w porównaniu z innymi. Animacje deklaratywne, czyli animacje oparte na danych wejściowych użytkownika, są łatwiejsze do zdefiniowania niż animacje oparte na języku JavaScript implementowane jako okresowe aktualizacje animacji właściwości stylu.

Nawet z requestAnimationFrame() nie zawsze zakłada, że każde wywołanie RAF musi sygnalizować lub animację. Na przykład wykorzystanie odpytywania RAF tylko do śledzenia liczby klatek (jak pokazano powyżej) nie powinno samoczynnie wpływać na pomiary płynności, ponieważ bez aktualizacji wizualnych.

Uwaga: wykrywanie animacji w narzędziach, a także specyfika implementacji animacji w przeglądarkach, nieustannie ewoluuje i jest coraz lepsza. Niedawno przenieśliśmy animacje w kolorze tła z wątku głównego do kompozytora w Chrome.

Jakość lub ilość

Wykrywanie animacji i aktualizacji klatek w animacji to nadal tylko część ponieważ rejestruje tylko liczbę aktualizacji animacji, jakości.

Na przykład podczas oglądania filmu możesz widzieć stałą liczbę klatek 60 kl./s film. Technicznie to całkiem płynne, ale w samym filmie może być niska szybkość transmisji bitów lub problemy z buforowaniem w sieci. Te dane nie są rejestrowane przez bezpośrednio na wskaźniki płynności animacji, ale może to mieć duży wpływ użytkownika.

Albo grę, która wykorzystuje <canvas> (może nawet za pomocą takich technik jak poza ekranem odbitki na płótnie, aby stałą liczbę klatek) może być technicznie idealnie płynna, animacji bez utraty jakości zasobów gry. lub prezentowanie artefaktów renderowania.

No i oczywiście na stronie mogą być tylko kiepskie animacje 🙂

To znaczy, wydaje mi się, że na swoje czasy byli całkiem fajni!

Stany pojedynczej klatki animacji

Ponieważ klatki mogą być wyświetlane częściowo lub pominięte klatki mogą mieć które nie wpływają na płynność, zaczęliśmy traktować każdą klatkę jako ocenę kompletności lub płynności.

Oto cała gama sposobów interpretacji klatka animacji w kolejności od najlepszego do najgorszego:

Brak wymaganej aktualizacji	Czas bezczynności, powtórzenie poprzedniej klatki.
W pełni prezentowane	Aktualizacja wątku głównego została zatwierdzona w terminie lub nie została zatwierdzona była wymagana aktualizacja wątku głównego.
Częściowo prezentowane	Tylko kompozytor; opóźniona aktualizacja wątku głównego nie miała .
Częściowo prezentowane	Tylko kompozytor; w wątku głównym pojawiła się aktualizacja wizualna, nie zawiera animacji wpływającej na płynność.
Częściowo prezentowane	Tylko kompozytor; w wątku głównym pojawiła się aktualizacja wizualna, która wpływa ale zamiast niej pojawiła się nieaktualna ramka.
Częściowo prezentowane	Tylko kompozytor; bez wymaganej głównej aktualizacji oraz aktualizacja kompozytora ma animację, która wpływa na płynność.
Częściowo prezentowane	Tylko kompozytor, ale aktualizacja kompozytora nie ma animację, która wpływa na płynność.
Usunięta klatka	Brak aktualizacji. Nie było żądanej aktualizacji kompozytora, a główną był opóźniony.
Usunięta klatka	Aktualizacja kompozytora była potrzebna, ale została opóźniona.
Nieużywana ramka	Potrzebna była aktualizacja, mechanizm renderowania wygenerował ją, ale Procesor graficzny nie został zaprezentowany przed terminem vsync.

Możliwe jest przekształcenie tych stanów w pewną punktację. I być może w jednym kierunku interpretacji tego wyniku należy uznać za prawdopodobieństwo jego obserwacji przez użytkownika. Pojedyncza usunięta klatka może nie być dostatecznie widoczna, ale sekwencja że wiele utraconych klatek wpływa na płynność.

Łączenie wszystkich elementów: wartość procentowa utraconych klatek

Czasami może być konieczne szczegółowe zbadanie stanu każdego z nich animacji, można też przypisać szybki „szybki podgląd” wynik dla z jakiegoś doświadczenia.

Ponieważ klatki mogą być częściowo prezentowane,a nawet całkowicie pominięte aktualizacje ramek mogą nie wpływać na płynność, chcemy się skupić na zliczanie klatek i inne parametry w zakresie, w jakim przeglądarka nie może dostarczać wyglądowo kompletne aktualizacje w odpowiednich momentach.

Model umysłu powinien przejść:

1. Klatki na sekundę, do
2. Wykrywanie brakujących i ważnych aktualizacji animacji w celu
3. Odsetek utraconych w danym okresie.

Co jest ważne: odsetek czasu oczekiwania na ważne aktualizacje. Naszym zdaniem jest to naturalny sposób, w jaki użytkownicy doświadczają płynności działania. treści internetowych w praktyce. Do tej pory w ramach strategii początkowy zestaw danych:

• Średni procent utraconych wyświetleń: dla wszystkich nieaktywnych klatek animacji w całym cała oś czasu
• Najmniejszy odsetek utraconych klatek: zgodnie z pomiarem przesuwania się w ciągu 1 sekundy. oknach czasu.
• 95 centyl procentu utraconych klatek:zgodnie z mierzeniem w czasie 1 sekundy. przesuwane okna czasu.

Te wyniki możesz dziś znaleźć w niektórych narzędziach dla programistów Chrome. Choć te skupiają się tylko na ogólnej przepustowości klatek, oceniamy też inne takich jak opóźnienie klatek.

Uwaga: te nazwy są nieco historyczne. Wskaźnik „Odsetek utraconych” nazwy nie pasują już do żadnego dosłownego słowa „była klatka” koncepcją działania. Jak już wspomnieliśmy w poprzedniej sekcji, każda klatka animacji to skomplikowany układ warunków prowadzący do ogólnego prawdopodobieństwa. Należy spodziewać się, że z czasem będą się one zmieniać.

Wypróbuj narzędzie dla programistów.

Wyświetlacz wydajności

Chromium ma elegancki HUD dotyczący wydajności, który jest ukryty za flagą. (chrome://flags/#show-performance-metrics-hud). Znajdziesz w niej Wyniki m.in. podstawowych wskaźników internetowych oraz kilka eksperymentalnych definicji dla płynności animacji na podstawie wartości Procent utraconych klatek w czasie.

Statystyki renderowania klatek

Włącz „Renderowanie klatek” „Statystyki” w Narzędziach deweloperskich w ustawieniach renderowania, aby zobaczyć podgląd na żywo nowych klatek animacji. które są oznaczone kolorami, co pozwala odróżnić częściowe aktualizacje od pełnych klatek. aktualizacje. Liczba klatek na sekundę w raportach dotyczy tylko wszystkich klatek, które zostały w pełni zaprezentowane.

Wyświetlanie ramek w nagraniach profili wydajności w Narzędziach deweloperskich

Wydajność Narzędzi deweloperskich panel ma miał Frames . Efekty nowoczesnego potoku renderowania nie są jednak zsynchronizowane to naprawdę działa. Ostatnio wprowadziliśmy wiele ulepszeń, nawet Chrome Canary, który naszym zdaniem znacznie ułatwia debugowanie problemów z animacją.

Dzisiaj widać, że klatki w przeglądarce klatek są lepiej dopasowane do Granice vsync i są oznaczane kolorami na podstawie stanu. Nadal nie ma wolnych miejsc dla wszystkich niuansów opisanych powyżej, ale planujemy dodać ich więcej. w najbliższej przyszłości.

Śledzenie w Chrome

Śledzenie w Chrome – wybrane przez nas narzędzie do zagłębiania się w szczegóły, możesz nagrać „Renderowanie treści internetowych” za pomocą nowej platformy Perfetto, UI (lub about:tracing) i szczegółowo zapoznaj się z zasadami Chrome potoku grafiki. Może to być trudne, ale trzeba pamiętać o kilku kwestiach niedawno dodane do Chromium, aby ułatwić ten proces. Tutaj znajdziesz ogólne informacje w cyklu Life of a Ramka dokument.

Za pomocą zdarzeń śledzenia możesz zdecydowanie określić:

• które animacje są aktywne (korzystając ze zdarzeń o nazwie TrackerValidation).
• uzyskiwanie dokładnej osi czasu klatek animacji (za pomocą zdarzeń o nazwach PipelineReporter).
• W przypadku problematycznych aktualizacji animacji dowiedz się, co dokładnie blokuje ich szybsze działanie (przy użyciu podziałów zdarzeń w PipelineReporter.
• W przypadku animacji opartych na danych wejściowych: sprawdź, jak długo trwa uzyskanie aktualizacji wizualnej (przy użyciu zdarzeń o nazwie EventLatency).

Co dalej?

Inicjatywa Wskaźniki internetowe ma na celu zapewnienie danych i wskazówek dotyczących i zapewnianiu użytkownikom doskonałych wrażeń w internecie. dane oparte na laboratoriach, takie jak Łącznie; Czas zablokowania (TBT) ma kluczowe znaczenie wykrywaniu i diagnozowaniu potencjalnych problemów z interakcją. Planujemy aby zaprojektować podobny wskaźnik laboratoryjny do płynności animacji.

Będziemy Was na bieżąco informować o tym, jak pracować nad nowymi pomysłami kompleksowe dane na podstawie danych poszczególnych klatek animacji.

W przyszłości chcemy również zaprojektować interfejsy API, które umożliwią pomiary płynności animacji. pole i w laboratorium. Wkrótce podamy też nowe informacje.

Prześlij opinię

Cieszymy się na myśl o najnowszych ulepszeniach i narzędziach dla programistów, jest dostępny w Chrome do mierzenia płynności animacji. Wypróbuj te narzędzia, sprawdź swoje animacje i daj nam znać, co z nimi zrobić.

Możesz przesłać swoje komentarze do web-vitals-feedback Google grupa z wartością „[Wskaźniki płynności]”. w temacie. Szukamy czekamy na Wasze opinie!