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 tworzenia modelu obiektów zbudowaliśmy drzewa DOM i CSSOM na podstawie danych wejściowych HTML i CSS. Oba te obiekty są jednak niezależne i odnoszą się do różnych aspektów 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 renderowania strony.
- Układ oblicza dokładne położenie 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 zawiera wszystkie widoczne elementy DOM na stronie i wszystkie informacje o stylach CSSOM dla każdego węzła.
Aby utworzyć drzewo renderowania, przeglądarka wykonuje mniej więcej te czynności:
Zaczynając od wierzchołka drzewa DOM, przejdź przez wszystkie widoczne węzły.
- 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.
Wynikiem jest drzewo renderowania zawierające 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 „projektowania”, 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ędzie Chrome DevTools może jednak dostarczyć pewnych informacji o wszystkich 3 etapach opisanych powyżej. 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 budowy drzewa renderowania, układu i malowania zależy od rozmiaru dokumentu, zastosowanych stylów i urządzenia, na którym działa: im większy dokument, tym więcej pracy ma przeglądarka; im bardziej skomplikowane style, tym więcej czasu zajmuje malowanie (np. wypełnienie jednolitym kolorem jest „tanie”, a renderowanie cienia rzutu jest „drogie”).
Strona jest w końcu widoczna w widocznym obszarze:
Oto krótkie podsumowanie czynności do wykonania w przeglądarce:
- Przetwarzanie znaczników HTML i tworzenie 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 zmienisz DOM lub CSSOM, musisz powtórzyć proces, aby ustalić, 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.