Data publikacji: 31 marca 2014 r.
Drzewa CSSOM i DOM są łączone w drzewo renderowania, które służy do obliczania układu każdego widocznego elementu i jest danymi wejściowymi procesu rysowania, który renderuje piksele na ekranie. Optymalizacja każdego z tych kroków ma kluczowe znaczenie dla osiągnięcia 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ć w dokumencie. 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 wyrenderowania strony.
- Układ oblicza dokładne położenie i rozmiar każdego obiektu.
- Ostatnim krokiem jest malowanie, które polega na pobraniu końcowego drzewa renderowania i wyrenderowaniu pikseli na ekranie.
Najpierw przeglądarka łączy DOM i CSSOM w „drzewo renderowania”, które zawiera całą widoczną zawartość DOM na stronie i wszystkie informacje o stylu CSSOM dla każdego węzła.
Aby utworzyć drzewo renderowania, przeglądarka wykonuje mniej więcej te czynności:
Zacznij od węzła głównego drzewa DOM i przejdź 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 wyrenderowanych danych wyjściowych.
- Niektóre węzły są ukryte za pomocą CSS-u i 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 znajdź odpowiednie pasujące reguły CSSOM i zastosuj je.
Emituj widoczne węzły z treścią i obliczonymi stylami.
Wynikiem końcowym jest drzewo renderowania, które zawiera informacje o treści i stylu wszystkich widocznych na ekranie elementów. Gdy mamy już drzewo renderowania, możemy przejść do etapu „układu”.
Do tej pory obliczyliśmy, które węzły powinny być widoczne, i ich style obliczone, ale nie obliczyliśmy ich dokładnego położenia i rozmiaru w obszarze wyświetlania urządzenia. Jest to etap „układu”, znany też jako „ponowne wczytywanie”.
Aby określić dokładny rozmiar i pozycję 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>
W <body> z poprzedniego przykładu znajdują się 2 zagnieżdżone elementy <div>: 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 pudełkowy”, który dokładnie określa pozycję i rozmiar każdego elementu w obszarze widocznym: 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 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 Chrome dla programistów mogą jednak dostarczyć pewnych informacji o wszystkich 3 etapach opisanych wcześniej. Przyjrzyj się etapowi układu w naszym oryginalnym przykładzie „hello world”:
- Zdarzenie „Układ” rejestruje w Osi czasu tworzenie drzewa renderowania oraz obliczanie pozycji i 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 utworzenie drzewa renderowania, układu i malowania zależy od rozmiaru dokumentu, zastosowanych stylów i urządzenia, na którym jest on wyświetlany: im większy dokument, tym więcej pracy ma przeglądarka; im bardziej skomplikowane style, tym więcej czasu zajmuje malowanie (np. malowanie jednolitym kolorem jest „tanie”, a obliczenie i wyrenderowanie cienia jest „drogie”).
Strona jest wreszcie widoczna w obszarze widoku:
Oto krótkie podsumowanie działań przeglądarki:
- Przetwarzanie znaczników HTML i tworzenie drzewa DOM.
- Przetwarzanie kodu CSS i tworzenie drzewa CSSOM.
- Połącz DOM i CSSOM w drzewo renderowania.
- Uruchom układ w drzewie renderowania, aby obliczyć geometrię każdego węzła.
- Wyświetl poszczególne węzły 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 dowiedzieć się, które piksele należy ponownie wyrenderować na ekranie.
Optymalizacja krytycznej ścieżki renderowania to proces minimalizowania łącznego czasu wykonywania kroków 1–5 w podanej wyżej kolejności. Dzięki temu treści są renderowane 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ższe częstotliwości odświeżania w przypadku treści interaktywnych.