Czasy malowania CSS i waga renderowania strony

Colt McAnlis

Wstęp

Osoby, które na bieżąco śledzą działanie przeglądarek, na pewno wiesz, że ostatnio pojawiły się ciekawe artykuły poświęcone przyspieszonemu renderowaniu i operacjom kompatybilnym przez GPU w Chrome. Po pierwsze, przyspieszone renderowanie w Chrome: model warstwowy jest świetnym wprowadzeniem do tego, jak Chrome wykorzystuje pojęcie warstw do rysowania stron. Aby dowiedzieć się więcej o przyspieszonym komponowaniu GPU w Chrome, dowiesz się, jak Chrome wykorzystuje te warstwy w połączeniu z GPU do renderowania strony.

Pytanie filozoficzne

Po poświęceniu dużo czasu na pisanie programowych rasteryzatorów dla celów 3D stało się jasne, że niektóre właściwości CSS powinny mieć różne skuteczność przy rysowaniu strony. Na przykład rasteryzowanie małego obrazu na ekranie to zupełnie inna operacja algorytmiczna, która polega na przyciąganiu cienia na dowolny kształt. Powstało więc pytanie: Jak różne właściwości CSS wpływają na wagę renderowania strony?

Moim celem było sklasyfikowanie dużego zestawu właściwości/wartości CSS według czasu renderowania, tak by można było zrozumieć, które typy właściwości CSS są bardziej wydajne niż inne. W tym celu napisałam automatyzację za pomocą taśmy klejącej i gumy balonowej, aby dodać dane liczbowe do czasu malowania CSS w ten sposób:

  • Wygeneruj pakiet pojedynczych stron HTML, z których każda zawiera pojedynczy element DOM i pewną permutację właściwości CSS.
  • Uruchom skrypt automatyzacji, który na każdej stronie:
  • Wyrzuć wszystkie chwyty i podziwiaj statystyki. (Ta część jest ważna...)

Przy takiej konfiguracji generujemy pakiet stron HTML, z których każda zawiera unikalną kombinację właściwości i wartości CSS, na przykład oto 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>

Po drugie, jest 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 znajdziesz 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>

Każda strona jest następnie wczytywana do nowej instancji Chrome (dzięki czemu podczas ponownego wczytywania strony nie zniekształcają się jej ramy czasowe), a obraz narciarski Skia (*.SKP) ocenia, jakie polecenia Skia zostały użyte do wyświetlenia strony. Po wygenerowaniu plików SKP dla każdego pliku HTML uruchamiamy kolejną partię do przekazania plików *.SKP przez aplikację Skia Benchmark (utworzoną na podstawie kodu źródłowego Skia), co pomija średni czas renderowania tej strony.

Ocena danych

Na tej podstawie mamy teraz w przybliżeniu możliwość wykresu, ile czasu zajmie wczytanie pakietu właściwości CSS. Możemy też zacząć od ustalania pozycji właściwości CSS w rankingu na podstawie skuteczności renderowania. Poniżej znajdziesz duży wykres w Chrome 27 w wersji beta, na którym widać wszystkie dane o czasie trwania tego procesu. Pamiętaj, że wszystkie dane mogą się zmienić, ponieważ Chrome z czasem staje się coraz szybszy.

Czasy wszystkich permutacji w teście

Każdy pionowy słupek przedstawia czas wyrenderowania strony z pojedynczą kombinacją właściwości CSS (powiększony 100x; prawdziwa wartość tego wykresu to 0,1,56 ms). Wiele ładnych linijek, ale w tej formie jest trochę bezużyteczne. Aby znaleźć przydatne trendy, musimy przeprowadzić eksplorację danych.

Po pierwsze, dowiadujemy się, że niektóre właściwości CSS są po prostu po prostu droższe od innych. Na przykład rysowanie cienia na elemencie DOM obejmuje operację wieloprzebiegową z użyciem splinii i innych rodzajów paskudnych elementów, a nie przezroczystość, która powinna być łatwiejsza do renderowania.

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

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

Czasy wszystkich permutacji w teście

Ciekawe jest to, że nie chodzi tylko o samą właściwość box-shadow, ale o ta konkretna permutacja wartości. Na przykład poniżej pokazujemy grupę elementów box-shadow : 50% i border-radius z odmianami wartości.

Czasy wszystkich permutacji w teście

Trochę to trwa w danych. Jest mnóstwo nieparzystych kombinacji, ale mój zestaw testowy prawie nie obejmuje ich wszystkich. Wciąż jest jeszcze mnóstwo testów i kombinacji, które mogą przynieść interesujące wyniki.

Określanie wagi renderowania strony

Dzięki możliwości śledzenia czasów renderowania poszczególnych elementów na stronie programiści mogą rozpocząć ocenę wagi renderowania strony i jej wpływu na responsywność witryny. Oto kilka wskazówek, które pomogą Ci zacząć

  1. Włącz w Chrome tryb malowania ciągłego w Narzędziach deweloperskich w Chrome, aby dowiedzieć się, jakie kosztują właściwości CSS.
  2. Uwzględnij w swoim obecnym procesie weryfikacji kodu przegląd kodu w celu wykrywania problemów z wydajnością Znajdź w swoim CSS miejsca, w których używasz droższych rozwiązań, np. gradientów i cieni. Zadaj sobie pytanie, czy te informacje naprawdę są potrzebne.
  3. W razie wątpliwości staraj się zawsze dążyć do lepszej skuteczności. Użytkownicy mogą nie pamiętać szerokości dopełnienia w kolumnach, ale zapamiętają to, co sprawia, że odwiedzają witrynę.

Uwagi końcowe

Jedną z najciekawszych rzeczy w tym eksperymencie jest to, że czasy czasowe będą się zmieniać wraz z każdą wersją Chrome (mamy nadzieję, że będzie ona coraz szybsza). Oprogramowanie przeglądarki to nieustannie zmieniająca się powierzchnia. Co jest dzisiaj wolne, jutro może być szybkie. Możesz pominąć ten artykuł, aby uniknąć umieszczania elementu box-shadow: 1px 2px 3px 4px w elemencie, który ma już atrybut border-radius:5. Najważniejsza jest jednak to, że właściwości CSS bezpośrednio wpływają na czas wczytywania strony.

Źródła