Czasy malowania CSS i waga renderowania strony

Colt McAnlis

Wprowadzenie

Jeśli należysz do osób, które interesują się działaniem przeglądarek, wiesz już, że w ostatnim czasie pojawiło się kilka świetnych artykułów na temat renderowania i kompozycji przyspieszanych przez GPU w Chrome. Po pierwsze, artykuł Przyspieszone renderowanie w Chrome: model warstw to świetne wprowadzenie do tego, jak Chrome używa warstw do rysowania strony. Jeśli chcesz dowiedzieć się więcej, przeczytaj artykuł Przyspieszone komponowanie w Chrome z użyciem procesora graficznego, w którym wyjaśniamy, jak Chrome używa tych warstw i procesora graficznego do renderowania strony.

Pytanie filozoficzne

Po poświęceniu sporej ilości czasu na pisanie rasteryzatorów programowych na potrzeby grafiki 3D, zdałem sobie sprawę, że niektóre właściwości CSS powinny mieć zróżnicowaną wydajność podczas rysowania strony. Na przykład rastrowanie małego obrazu na ekranie to zupełnie inna operacja algorytmiczna niż rysowanie cienia padającego na dowolny kształt. Pytanie brzmiało więc: jak różne właściwości CSS wpływają na obciążenie renderowania strony?

Moim celem było pogrupowanie dużej liczby właściwości/wartości CSS według czasu renderowania, abyśmy mogli lepiej zrozumieć, które typy właściwości CSS są wydajniejsze od innych. W tym celu napisałem automatyzację z wykorzystaniem taśmy klejącej i gum bąbelkowych, aby zwiększyć widoczność liczbową czasu malowania w CSS, co zadziałało w ten sposób:

  • wygenerować zestaw pojedynczych stron HTML, z których każda zawiera pojedynczy element DOM i niektóre z dołączonych do niego właściwości CSS;
  • Uruchom skrypt automatyzacji, który w przypadku każdej strony:
    • Uruchom Chrome
    • Wczytywanie strony
    • Utwórz obraz Skia dla strony.
    • Sprawdź każde zdjęcie Skia zrobione w Skia Benchmark, aby uzyskać czas.
  • Wrzucaj czasy i podziwiaj liczby. (Ta część jest ważna…)

W ramach tej konfiguracji generujemy zestaw stron HTML, z których każda zawiera unikalną kombinację właściwości i wartości CSS. Oto na przykład 2 pliki HTML:

<style>
#example1 {
    background: url(foo.png) top left / 50% 60%;
    padding: 20px; 
    margin-top: 10px;
    margin-right: 20px; 
    text-align: center;
}
</style>
<div id="example1">WOAH</div>

Kolejna kwestia to bardziej złożone

<style>
#example1 {
    background-color:#eee;
    box-shadow: 1px 2px 3px 4px black;
    border-radius: 50%;
    background: radial-gradient(circle closest-corner, white, black);
    padding: 20px; 
    margin-top: 10px;
    margin-right: 20px; 
    text-align: center;
}
</style>
<div id="example1">WOAH</div>

Poniżej podajemy wariant ostatniego przykładu, w którym zmieniamy tylko wartość gradientu promieniowego:

<style>
#example1 
{
    background-color:#eee;
    box-shadow: 1px 2px 3px 4px black;
    border-radius: 50%;
    background: radial-gradient(farthest-side, white, black);
    padding: 20px; 
    margin-top: 10px;
    margin-right: 20px; 
    text-align: center;
}
</style>
<div id="example1" style="padding: 20px; margin-top: 10px;margin-right: 20px; text-align: center;">WOAH</div>

Następnie każda strona jest wczytywana w świeżym wystąpieniu Chrome (aby zapewnić, że czasy nie są w żaden sposób zafałszowane przez nieaktualne stany podczas ponownego wczytywania strony), a następnie tworzony jest obraz Skia (*.SKP), aby ocenić, jakie polecenia Skia są używane do wyświetlania strony. Po wygenerowaniu plików SKP dla każdego pliku HTML uruchamiamy kolejną partię, aby przesłać pliki *.SKP do aplikacji Skia Benchmark (zbudowanej na podstawie kodu źródłowego Skia), która wyświetla średni czas renderowania danej strony.

Ocenianie danych

Dzięki temu możemy teraz w przybliżony sposób określić, ile czasu zajmuje renderowanie zestawu właściwości CSS. Możemy też zacząć klasyfikować usługi porównywania cen według ich wydajności w zakresie malowania. Oto duży wykres wykonany w Chrome 27 w wersji beta, który pokazuje pełny zestaw danych o czasie z tego procesu. Pamiętaj, że wszystkie dane mogą ulec zmianie, ponieważ Chrome z czasem staje się coraz szybszy.

Czasy dla wszystkich permutacji w teście

Każdy pionowy pasek reprezentuje czas renderowania strony z pojedynczą kombinacją właściwości CSS (powiększony 100 razy; rzeczywista wartość na tym wykresie to 0,156 ms). Jest sporo ładnych wierszy, ale w tej formie są one raczej bezużyteczne – musimy przeprowadzić eksplorację danych, aby znaleźć przydatne trendy.

Po pierwsze, znaleźliśmy dowód na to, że renderowanie niektórych właściwości CSS jest po prostu droższe niż innych. Na przykład rysowanie cienia na elemencie DOM obejmuje wieloprzebiegową operację z krzywiskami i innymi nieprzyjemnymi elementami, w przeciwieństwie do przezroczystości, która powinna być łatwiejsza do renderowania.

Czas potrzebny na namalowanie elementu, który ma tylko 1 właściwość CSS

Po drugie, co ciekawsze, kombinacje właściwości CSS mogą mieć dłuższy czas renderowania niż suma ich części. Z perspektywy obserwatora jest to trochę dziwne, ponieważ spodziewamy się, że A + B = C, a nie 2,2 C. Na przykład dodanie elementów box-shadow i border-radius-stroke :

Czasy dla wszystkich permutacji w teście

Co ciekawe, nie chodzi tylko o sam właściwość box-shadow, ale o konkretną permutację wartości. Poniżej pokazano na przykład grupowanie box-shadow : 50% i border-radius z różnymi wartościami.

Czasy dla wszystkich permutacji w teście

Patrząc na dane, widać, że to trwa jakiś czas. Istnieje wiele różnych dziwnych kombinacji, a mój zestaw testów obejmuje tylko część z nich. Nadal jest mnóstwo testów i kombinacji, które mogą dać interesujące wyniki.

Znajdowanie wagi renderowania strony

Dzięki możliwości śledzenia czasu renderowania poszczególnych elementów na stronie deweloperzy mogą zacząć oceniać wagę renderowania strony i to, jak wpływa ona na responsywność witryny. Oto kilka wskazówek na początek

  1. Aby dowiedzieć się, które właściwości CSS są dla Ciebie kosztowne, użyj w Narzędziach deweloperskich w Chrome trybu ciągłego wyświetlania.
  2. Włącz przeglądy kodu CSS do swojego dotychczasowego procesu przeglądania kodu, aby wykrywać problemy ze skutecznością. Sprawdzaj miejsca w CSS, w których używasz elementów, które są znane jako bardziej kosztowne, np. gradientów i cieni. Zastanów się, czy na pewno są tu potrzebne.
  3. W razie wątpliwości zawsze wybieraj opcję, która przyniesie większą skuteczność. Użytkownicy mogą nie pamiętać, jaka jest szerokość marginesu kolumn, ale zapamiętają, jak się czuli podczas wizyty w Twojej witrynie.

Uwagi końcowe

Jednym z najciekawszych aspektów tego eksperymentu jest to, że czasy będą się zmieniać wraz z każdą wersją Chrome (mamy nadzieję, że będą coraz krótsze). Oprogramowanie przeglądarki to stale zmieniająca się powierzchnia. To, co dziś jest powolne, jutro może być szybkie. Możesz pominąć ten artykuł, aby nie umieszczać elementu box-shadow: 1px 2px 3px 4px w elemencie, który ma już border-radius:5. Bardziej wartościową lekcją jest jednak to, że właściwości CSS mają bezpośredni wpływ na czas renderowania strony.

Pliki referencyjne