Data publikacji: 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 renderowania, który przekształca piksele na ekranie. Optymalizacja każdego z tych kroków jest kluczowa dla uzyskania optymalnej wydajności renderowania.
W poprzedniej sekcji dotyczącej budowania modelu obiektowego stworzyliśmy drzewa DOM i drzewa CSSOM na podstawie danych wejściowych HTML i CSS. Oba te obiekty są jednak niezależne i odzwierciedlają różne aspekty dokumentu: jeden opisuje zawartość, a drugi – reguły stylów, które należy zastosować w dokumencie. Jak połączyć te dwa elementy i zachęcić przeglądarkę do renderowania pikseli na ekranie?
Podsumowanie
- Drzewa DOM i CSSOM łączą się, tworząc drzewo renderowania.
- Drzewo renderowania zawiera tylko węzły wymagane do wyrenderowania strony.
- Układ oblicza dokładną pozycję i rozmiar każdego obiektu.
- Ostatnim krokiem jest malowanie, które pobiera ostatni drzewo renderowania i renderuje piksele na ekranie.
Najpierw przeglądarka łączy DOM i CSSOM w „drzewo renderowania”, które przechwytuje całą widoczną zawartość 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:
Przejdź przez każdy widoczny węzeł, zaczynając od poziomu głównego drzewa DOM.
- Niektóre węzły są niewidoczne (np. tagi skryptu, metatagi itp.) i są pomijane, ponieważ nie są uwzględniane w wygenerowanym wyjściu.
- Niektóre węzły są ukryte za pomocą CSS i nie są uwzględniane w drzewie renderowania. Na przykład węzeł span w przykładzie powyżej nie występuje w drzewie renderowania, ponieważ mamy regułę, która ustawia w nim właściwość „display: none”.
W przypadku każdego widocznego węzła znajdź odpowiednie reguły CSSOM i zastosuj je.
Emitowanie widocznych węzłów z treścią i ich obliczonymi stylami.
Ostatecznym wynikiem jest drzewo renderowania, które zawiera informacje o treściach i stylu wszystkich widocznych treści na ekranie. Gdy drzewo renderowania jest już gotowe, możemy przejść do etapu „layoutu”.
Do tej pory obliczyliśmy, które węzły powinny być widoczne, oraz ich obliczone style, ale nie obliczyliśmy ich dokładnej pozycji i wielkości w obszarze widoku urządzenia. Jest to etap „rozkładu”, znany też jako „przepływ”.
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>
Element <body> w poprzednim przykładzie zawiera 2 zagnieżdżone elementy <div>: pierwszy (nadrzędny) element <div> ustawia rozmiar wyświetlania węzła na 50% szerokości widoku, a drugi element <div> zawarty w nadrzędnym ustawia element width na 50% szerokości nadrzędnego, czyli 25% szerokości widoku.
Wynikiem procesu tworzenia układu jest „model pudełka”, który dokładnie określa dokładną pozycję i rozmiar każdego elementu w widocznym obszarze: wszystkie względne pomiary są przekształcane w bezwzględne piksele na ekranie.
Teraz, gdy wiemy, które węzły są widoczne, a także ich obliczone style i geometrię, możemy przekazać te informacje do ostatniego etapu, który przekształca każdy węzeł w drzewie renderowania w rzeczywiste piksele na ekranie. Ten krok jest często nazywany „malowaniem” lub „rasteryzacją”.
Może to trochę potrwać, ponieważ przeglądarka musi wykonać sporo pracy. Narzędzia deweloperskie w Chrome mogą jednak zapewnić wgląd we wszystkie 3 opisane wcześniej etapy. Sprawdź etap układu w przypadku naszego oryginalnego przykładu „hello world”:
- Zdarzenie „Layout” rejestruje na osi czasu konstrukcję drzewa renderowania, położenie i obliczenie rozmiaru.
- Po zakończeniu układu przeglądarka wysyła zdarzenia „Paint Setup” i „Paint”, które przekształcają drzewo renderowania w piksele na ekranie.
Czas potrzebny na wykonanie konstrukcji drzewa, układu i wymalowania różni się w zależności od rozmiaru dokumentu, zastosowanych stylów i urządzenia, na którym został uruchomiony: im większy dokument, tym więcej pracy ma przeglądarka; im bardziej skomplikowane style, tym więcej czasu potrzebnego na malowanie (np. jednolity kolor jest „tani”, a cień jest „kosztowny” do obliczenia i wyrenderowania).
Strona jest w końcu widoczna w widocznym obszarze:
Oto krótkie podsumowanie czynności do wykonania w przeglądarce:
- Przetworzenie znaczników HTML i stworzenie drzewa DOM.
- Przetwarzanie znaczników CSS i tworzenie drzewa CSSOM.
- Połącz DOM i CSSOM w drzewo renderowania.
- Uruchom układ na drzewie renderowania, aby obliczyć geometrię każdego węzła.
- Malowanie poszczególnych węzłów na ekranie.
Strona demonstracyjna może wydawać się prosta, ale wymaga sporo pracy ze strony przeglądarki. Jeśli zmodyfikowano DOM lub CSSOM, trzeba było powtórzyć ten proces, aby dowiedzieć się, które piksele trzeba ponownie wyrenderować na ekranie.
Optymalizacja ścieżki renderowania krytycznego to proces minimalizowania łącznego czasu poświęconego na wykonanie kroków od 1 do 5 w wymienionej powyżej sekwencji. Dzięki temu treści są renderowane na ekranie tak szybko, jak to możliwe, a czas między aktualizacjami ekranu po początkowym renderowaniu jest krótszy. Oznacza to wyższą częstotliwość odświeżania interaktywnych treści.