Opublikowano: 31 marca 2014 r.
Drzewa CSSOM i DOM są łączone w drzewo renderowania, które jest następnie używane do obliczania układu każdego widocznego elementu i służy jako dane wejściowe do procesu rysowania, który renderuje piksele na ekranie. Optymalizacja każdego z tych kroków ma kluczowe znaczenie dla uzyskania optymalnej wydajności renderowania.
W poprzedniej sekcji dotyczącej tworzenia modelu obiektów na podstawie danych wejściowych HTML i CSS utworzyliśmy drzewa DOM i CSSOM. Są to jednak niezależne obiekty, które rejestrują różne aspekty dokumentu: jeden opisuje treść, a drugi – reguły stylu, które należy zastosować do dokumentu. Jak połączyć te 2 elementy i sprawić, aby przeglądarka renderowała piksele na ekranie?
Podsumowanie
- Drzewa DOM i CSSOM łączą się, tworząc drzewo renderowania.
- Drzewo renderowania zawiera tylko węzły wymagane do renderowania strony.
- Układ oblicza dokładne położenie i rozmiar każdego obiektu.
- Ostatnim krokiem jest rysowanie, które przyjmuje ostateczne drzewo renderowania i renderuje piksele na ekranie.
Najpierw przeglądarka łączy DOM i CSSOM w „drzewo renderowania”, które zawiera całą widoczną treść DOM na stronie oraz wszystkie informacje o stylu CSSOM dla każdego węzła.
Aby utworzyć drzewo renderowania, przeglądarka wykonuje mniej więcej te czynności:
Zaczynając od korzenia drzewa DOM, przechodzi przez każdy widoczny węzeł.
- Niektóre węzły są niewidoczne (np. tagi skryptów, tagi meta itp.) i są pomijane, ponieważ nie są odzwierciedlane w renderowanych danych wyjściowych.
- Niektóre węzły są ukryte za pomocą CSS i również pomijane w drzewie renderowania. Na przykład węzeł span w powyższym przykładzie nie występuje w drzewie renderowania, ponieważ mamy wyraźną regułę, która ustawia dla niego właściwość „display: none”.
W przypadku każdego widocznego węzła znajduje odpowiednie pasujące reguły CSSOM i stosuje je.
Emituje widoczne węzły z treścią i obliczonymi stylami.
Ostatecznym wynikiem jest drzewo renderowania, które zawiera zarówno treść, jak i informacje o stylu całej widocznej treści na ekranie. Gdy drzewo renderowania jest gotowe, możemy przejść do etapu „układu”.
Do tej pory obliczyliśmy, które węzły powinny być widoczne, oraz ich obliczone style, ale nie obliczyliśmy ich dokładnego położenia i rozmiaru w widocznym obszarze urządzenia. Jest to etap „układu”, znany też jako „ponowne obliczanie układu”.
Aby określić dokładny rozmiar i położenie każdego obiektu na stronie, przeglądarka zaczyna od korzenia drzewa renderowania i przechodzi przez nie. Przeanalizuj ten przykład:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Critial Path: Hello world!</title>
</head>
<body>
<div style="width: 50%">
<div style="width: 50%">Hello world!</div>
</div>
</body>
</html>
Spójrz na ten przykład HTML renderowany jako strona internetowa.
Element <body> w poprzednim przykładzie zawiera 2 zagnieżdżone elementy <div>s: pierwszy (nadrzędny) element <div> ustawia rozmiar wyświetlania węzła na 50% szerokości widocznego obszaru, a drugi element <div> – zawarty w elemencie nadrzędnym – ustawia jego width na 50% elementu nadrzędnego, czyli 25% szerokości widocznego obszaru.
Wynikiem procesu układu jest „model pola”, który dokładnie określa położenie i rozmiar każdego elementu w widocznym obszarze: wszystkie pomiary względne są przeliczane na bezwzględne piksele na ekranie.
Gdy wiemy już, które węzły są widoczne, oraz ich obliczone style i geometrię, możemy przekazać te informacje do ostatniego etapu, który przekształca każdy węzeł w drzewie renderowania na rzeczywiste piksele na ekranie. Ten krok jest często nazywany „renderowaniem” lub „rasteryzacją”.
Może to zająć trochę czasu, ponieważ przeglądarka musi wykonać sporo pracy. Narzędzia deweloperskie w Chrome mogą jednak dostarczyć pewnych informacji o wszystkich 3 opisanych wcześniej etapach. Sprawdź etap układu w naszym oryginalnym przykładzie „Hello World”:
- Zdarzenie „Układ” rejestruje w osi czasu tworzenie drzewa renderowania oraz obliczanie położenia i rozmiaru.
- Po zakończeniu układu przeglądarka emituje zdarzenia „Konfiguracja rysowania” i „Rysowanie”, które przekształcają drzewo renderowania na piksele na ekranie.
Czas potrzebny na utworzenie drzewa renderowania, układ i rysowanie zależy od rozmiaru dokumentu, zastosowanych stylów i urządzenia, na którym jest on uruchamiany. Im większy dokument, tym więcej pracy ma przeglądarka. Im bardziej skomplikowane style, tym więcej czasu zajmuje rysowanie (np. rysowanie jednolitego koloru jest „tanie”, a rysowanie cienia jest „drogie” pod względem obliczeń i renderowania).
Strona jest wreszcie widoczna w widocznym obszarze:
Oto krótkie podsumowanie kroków wykonywanych przez przeglądarkę:
- Przetwarzanie kodu HTML i tworzenie drzewa DOM.
- Przetwarzanie kodu CSS i tworzenie drzewa CSSOM.
- Łączenie DOM i CSSOM w drzewo renderowania.
- Uruchamianie układu w drzewie renderowania w celu obliczenia geometrii każdego węzła.
- Rysowanie poszczególnych węzłów na ekranie.
Strona demonstracyjna może wydawać się prosta, ale wymaga od przeglądarki sporo pracy. Jeśli DOM lub CSSOM zostały zmodyfikowane, musisz powtórzyć ten proces, aby określić, które piksele trzeba ponownie wyrenderować na ekranie.
Optymalizacja krytycznej ścieżki renderowania to proces minimalizowania łącznego czasu spędzonego na wykonywaniu kroków 1–5 w powyższej sekwencji. Dzięki temu treść jest renderowana na ekranie tak szybko, jak to możliwe, a także skraca się czas między aktualizacjami ekranu po początkowym renderowaniu, czyli uzyskuje się wyższą częstotliwość odświeżania w przypadku treści interaktywnych.