Drzewa CSSOM i DOM są łączone w drzewo renderowania, które następnie służy do obliczania układu każdego widocznego elementu i służą jako dane wejściowe w procesie renderowania pikseli. Optymalizacja każdego z tych etapów ma kluczowe znaczenie dla uzyskania optymalnej wydajności renderowania.
W poprzedniej sekcji dotyczącej tworzenia modelu obiektowego utworzyliśmy drzewa DOM i drzewa CSSOM na podstawie danych wejściowych HTML i CSS. Są to jednak niezależne obiekty rejestrujące różne aspekty dokumentu: jeden opisuje treść, a drugi opisuje reguły stylu, które mają być zastosowane w dokumencie. Jak połączyć te dwa elementy i umożliwić przeglądarce renderowanie pikseli na ekranie?
Podsumowanie
- Drzewa DOM i CSSOM połączą się, aby utworzyć drzewo renderowania.
- Drzewo renderowania zawiera tylko węzły wymagane do wyrenderowania strony.
- Funkcja Układ oblicza dokładną pozycję i rozmiar każdego obiektu.
- Ostatnim krokiem jest renderowanie, które pobiera drzewo renderowania i renderuje piksele na ekranie.
Najpierw przeglądarka łączy DOM i CSSOM w „drzewo renderowania”, które obejmuje całą widoczną na stronie treść DOM i wszystkie informacje o stylu CSSOM w każdym węźle.
Aby utworzyć drzewo renderowania, przeglądarka wykonuje mniej więcej te czynności:
Zaczynaj od poziomu głównego drzewa DOM, przechodząc do każdego widocznego węzła.
- Niektóre węzły nie są widoczne (np. tagi skryptu, metatagi itp.) i są pomijane, ponieważ nie są odzwierciedlane w renderowanych danych wyjściowych.
- Niektóre węzły są ukrywane za pomocą CSS i również są pomijane w drzewie renderowania. Na przykład w drzewie renderowania brakuje węzła „span” – w przykładzie powyżej – ponieważ mamy wyraźną regułę, która ustawia w nim właściwość „display: none”.
Dla każdego widocznego węzła znajdź i zastosuj odpowiednie reguły CSSOM.
Emituj widoczne węzły z treścią i ich stylami obliczonymi.
Ostatecznym wynikiem jest drzewo renderowania zawierające informacje o treści i stylu wszystkich treści widocznych na ekranie. Drzewo renderowania jest już gotowe, więc możemy przejść do etapu „układu”.
Do tej pory obliczaliśmy, które węzły powinny być widoczne i jakie są ich style, ale nie obliczaliśmy ich dokładnej pozycji i rozmiaru w widocznym obszarze urządzenia – to właśnie etap „układu”, nazywany też „przeformatowaniem”.
Aby ustalić dokładny rozmiar i położenie każdego obiektu na stronie, przeglądarka rozpoczyna wędrówki od głównego katalogu drzewa renderowania. Przeanalizujmy prosty, praktyczny 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>
Treść strony powyżej zawiera dwa zagnieżdżone elementy div: pierwszy (nadrzędny) ustawia rozmiar wyświetlanego węzła na 50% szerokości widocznego obszaru, a drugi div – zawarty w elemencie nadrzędnym – ustawia szerokość na 50% elementu nadrzędnego, czyli 25% szerokości widocznego obszaru.
Wynikiem procesu jest „model prostokątny”, który precyzyjnie oddaje dokładną pozycję i rozmiar każdego elementu w widocznym obszarze. Wszystkie pomiary względne są konwertowane na piksele bezwzględne na ekranie.
Gdy wiemy już, które węzły są widoczne, jakie są ich style i geometria, możemy przekazać te informacje do etapu ostatniego, w którym każdy węzeł w drzewie renderowania jest przekształcany w piksele widoczne na ekranie. Ten etap jest często nazywany „malowaniem” lub „rasteryzacją”.
To może trochę potrwać, ponieważ przeglądarka musi wykonywać sporo zadań. Jednak w Narzędziach deweloperskich w Chrome możesz dowiedzieć się czegoś więcej o wszystkich 3 krokach opisanych powyżej. Przyjrzyjmy się etapowi układu w naszym oryginalnym przykładzie „hello world”:
- Zdarzenie „Układ” rejestruje konstrukcję drzewa renderowania, jego położenie i obliczenie rozmiaru na osi czasu.
- Gdy układ jest gotowy, przeglądarka wysyła zdarzenia „Paint Setup” i „Paint”, które konwertują drzewo renderowania na piksele na ekranie.
Czas potrzebny na zbudowanie drzewa renderowania, układ i wyrenderowanie 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 złożone style, tym więcej czasu poświęca na ich malowanie (np. malowanie jednolitego koloru jest „tanie”, a cień jest „kosztowny”).
Strona staje się ostatecznie widoczna:
Oto krótkie podsumowanie czynności, które należy wykonać w przeglądarce:
- Przetwórz znaczniki HTML i utwórz drzewo DOM.
- Przetwórz znaczniki CSS i utwórz drzewo CSSOM.
- Połącz DOM i CSSOM w drzewo renderowania.
- Uruchom układ na drzewie renderowania, aby obliczyć geometrię każdego węzła.
- Pomaluj poszczególne węzły na ekranie.
Nasza strona demonstracyjna może wyglądać na prostą, ale wymaga sporo pracy. W przypadku zmodyfikowania DOM lub CSSOM należałoby powtórzyć cały proces, aby określić, które piksele wymagają ponownego wyrenderowania na ekranie.
Optymalizacja krytycznej ścieżki renderowania to proces minimalizacji łącznego czasu wykonywania kroków 1–5 w powyższej sekwencji. Dzięki temu treści będą renderowane na ekranie najszybciej jak to możliwe i skrócisz czas między aktualizacjami ekranu po ich początkowym zrenderowaniu, czyli uzyskasz wyższe częstotliwości odświeżania treści interaktywnych.