Konstrukcja, układ i renderowanie drzewa renderowania

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.

DOM i CSSOM są połączone, aby utworzyć drzewo renderowania

Aby utworzyć drzewo renderowania, przeglądarka wykonuje mniej więcej te czynności:

  1. 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”.
  2. Dla każdego widocznego węzła znajdź i zastosuj odpowiednie reguły CSSOM.

  3. 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>

Wypróbuj

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.

Obliczam informacje o układzie

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”:

Mierzenie układu w Narzędziach deweloperskich

  • 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:

Wyrenderowana strona Hello World

Oto krótkie podsumowanie czynności, które należy wykonać w przeglądarce:

  1. Przetwórz znaczniki HTML i utwórz drzewo DOM.
  2. Przetwórz znaczniki CSS i utwórz drzewo CSSOM.
  3. Połącz DOM i CSSOM w drzewo renderowania.
  4. Uruchom układ na drzewie renderowania, aby obliczyć geometrię każdego węzła.
  5. 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.

Prześlij opinię