Konstrukcja, układ i renderowanie drzewa renderowania

Ilya Grigorik

Opublikowano: 31 marca 2014 r.

Drzewa CSSOM i DOM są łączone w drzewo renderowania, z którego który pozwala obliczyć układ każdego widocznego elementu i służy jako dane wejściowe czyli procesu renderowania pikseli 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 sprawić, że przeglądarka będzie renderowana? 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ładną pozycję i rozmiar każdego obiektu.
  • Ostatnim etapem jest renderowanie, które pobiera drzewo renderowania i renderuje piksele na ekranie.

Najpierw przeglądarka łączy DOM i CSSOM w „drzewo renderowania”, który rejestruje całą widoczną zawartość DOM na stronie i wszystkie informacje o stylu CSSOM dla każdego węzła.

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

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

  1. 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 są pomijane w drzewie renderowania. na przykład w drzewie renderowania brakuje węzła spanu (w powyższym przykładzie), ponieważ występuje jawna reguła, która ustawia wartość „display: none” tej usługi.

  2. Dla każdego widocznego węzła znajdź odpowiednie pasujące reguły CSSOM i zastosuj je.

  3. 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. Drzewo renderowania jest już gotowe, więc możemy przejść do „układu”. etapie.

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 pozycję każdego obiektu na stronie, przeglądarka rozpoczyna się w głównej części drzewa renderowania i przemierza go. 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>

Wypróbuj

Element <body> z poprzedniego przykładu zawiera 2 zagnieżdżone elementy <div>: pierwszy (nadrzędny) <div> ustawia rozmiar wyświetlanego węzła na 50% szerokości widocznego obszaru, a drugi element <div> (zawiera element nadrzędny) ustawia jego width na wartość 50% elementu nadrzędnego. czyli 25% szerokości widocznego obszaru.

Obliczam informacje o układzie

Wynikiem procesu tworzenia układu jest „model ramkowy”, dokładnie oddaje dokładną pozycję i rozmiar każdego elementu w widocznym obszarze – wszystkie pomiary względne są konwertowane na piksele bezwzględne na ekranie.

Teraz, gdy wiemy już, które węzły są widoczne oraz jakie są ich style i geometria, możemy przekazać te informacje do ostatniego etapu, na którym każdy węzeł w drzewie renderowania jest konwertowany na rzeczywiste piksele na ekranie. Ten etap często określa się jako „malowanie”. czy rastrowania.

Może to zająć trochę czasu, 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”:

Pomiar układu w Narzędziach deweloperskich

  • Zdarzenie „Layout” rejestruje na osi czasu konstrukcję drzewa renderowania, położenie i obliczenie rozmiaru.
  • Gdy układ będzie gotowy, przeglądarka wygeneruje błąd „Konfiguracja farby” i „Paint” które konwertują drzewo renderowania na piksele na ekranie.

Czas potrzebny na wykonanie budowy drzewa renderowania, układu i wyświetlenia 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 wyświetlanie (np. wypełnienie jednolitym kolorem jest „tanie”, a renderowanie cienia rzutowanego – „drogie”).

Strona jest w końcu widoczna w widocznym obszarze:

Wyrenderowana strona „Hello World”

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

  1. Przetwarzanie znaczników HTML i tworzenie drzewa DOM.
  2. Przetwórz znaczniki CSS i utwórz drzewo CSSOM.
  3. Połącz DOM i CSSOM w drzewo renderowania.
  4. Uruchom układ w drzewie renderowania, by obliczyć geometrię każdego węzła.
  5. 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 krytycznej ścieżki renderowania to proces minimalizacji łącznego czasu poświęcanego na wykonywanie kroków 1–5 z powyższej 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.

Prześlij opinię