60 FPS w Firefoksie: projekt Silk obiecuje naprawdę płynny interfejs przeglądarki

O autorze

Adam Golański

@eimi

Hodowca maszyn wirtualnych i psów, poza tym stary linuksiarz, bonvivant i śmieszek. W 2012 roku napisał na DP o algorytmie haszowania Keccak i wciąż pamięta, jak on działa.

Silniki skryptowe, środowiska uruchomieniowe – to wszystko może być szybkie jak błyskawica, ale jeśli interfejs użytkownika za nimi nie nadąży, to użytkownicy i tak będą narzekali, że „muli”. Zrozumiał to szybko Microsoft. Mimo że Windows Phone nie jest zbyt wydajnym systemem, skutecznie sprawia wrażenie wydajnego dzięki dynamice animacji interfejsu. Teraz zaczyna to rozumieć też Mozilla. Projekt Silk to szansa na uzyskanie płynnie działającego UI przeglądarki, odświeżanego w 60 FPS.

By zapewnić należytą płynność animacji interfejsu, Firefox stara się dziś rysować swój interfejs w tempie zgodnym ze sprzętem – jedna klatka co 16,6 milisekund, tak by nadążyć za standardową częstotliwością synchronizacji wyświetlacza (w wypadku monitorów ciekłokrystalicznych pamięci obrazu monitora) z dopływającymi do niego informacjami o obrazie. To tzw. synchronizacja pionowa, vsync, której utrata prowadzi do rozmaitych zaburzeń wyświetlania.

Stara się – ale nie zawsze to „liskowi” wychodzi. Planujący rysowanie kolejnych klatek co 16,6 ms timer jest bowiem zrealizowany całkowicie programowo, wskutek czego bazujące na nim animacje otrzymują czasoznaczki o niejednorodnych interwałach. Odchylenia nie przekraczają 1%, ale to wystarczy, by ludzkie oko zauważyło, że coś jest nie tak. Co więcej, zdarza się, że software'owy timer będzie przesunięty względem pionowej synchronizacji. Wtedy sprzęt, nie czekając na działanie oprogramowania i tak wyświetli kolejną klatkę według swojego sprzętowego zegara. Jeśli potok renderowania nie zdąży na czas z kolejną klatką, w pamięci obrazu pozostanie poprzednia. Wystarczy tu minimalne przesunięcie, by program zgubił jedną klatkę i musiał czekać do następnego sygnału vsync z jej nadrobieniem.

Silnik renderujący Firefoksa (Gecko) w teorii powinien bez problemu uporać się w ciągu 16,6 ms z przeprowadzeniem trzech operacji: narysowaniem nowej klatki w głównym wątku, przesłaniem zaktualizowanej treści do kompozytora obrazu oraz złożeniem w całość nowej treści. W praktyce często dzieje się inaczej – kroki te nie tylko nie mają nic wspólnego z synchronizacją pionową, ale też korzystają z niezależnych timerów.

Projekt Silk ma sprawić, że interfejs Firefoksa będzie gładki jak jedwab, dzięki spięciu całego potoku renderowania z synchronizacją pionową. Wszystkie wykonywane w głównym wątku animacje będą otrzymywały ujednolicone co do interwałów czasoznaczki. Kolejne operacje od rysowania po kompozycję będą rozpoczynane w ściśle określonych momentach. Firefox będzie też mógł sobie znacznie lepiej radzić z interfejsami dotykowymi – nie będzie musiał odpowiadać na zdarzenia dotykowe, których nie ma na ekranie, płynniej będzie przewijał zawartość stron za ruchem palca. Okazało się też, że Silk umożliwił przyspieszenie samego czasu kompozycji obrazu, a co za tym idzie, zmniejszył obciążenie procesora i przez to zużycie energii.

Już niebawem rozwiązania opracowane w ramach Silk pojawią się na urządzeniach mobilnych z Firefox OS-em. Następnie trafić mają na inne platformy, zaczynając od Androida. Nie podano jeszcze żadnych konkretnych terminów wprowadzenia Silk na wersje desktopowe tej przeglądarki. Więcej na ten temat można poczytać na łamach bloga hacks.mozilla.org.