Zanim przeglądarka będzie mogła wyrenderować stronę, musi utworzyć drzewa DOM i CSSOM. Musimy więc jak najszybciej dostarczyć zarówno kod HTML, jak i CSS do przeglądarki.
Podsumowanie
- Bajty → znaki → tokeny → węzły → model obiektowy.
- Znaczniki HTML są przekształcane w model obiektu dokumentu (DOM). Znaczniki CSS są przekształcane w obiektowy model CSS (CSSOM).
- DOM i CSSOM to niezależne struktury danych.
- W panelu wydajności Narzędzi deweloperskich w Chrome możemy rejestrować i sprawdzać koszty konstrukcji i przetwarzania DOM i CSSOM.
Obiektowy model dokumentu (DOM)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="style.css" rel="stylesheet" />
<title>Critical Path</title>
</head>
<body>
<p>Hello <span>web performance</span> students!</p>
<div><img src="awesome-photo.jpg" /></div>
</body>
</html>
Zacznijmy od najprostszego przypadku: zwykłej strony HTML z tekstem i 1 obrazem. Jak przeglądarka przetwarza tę stronę?
- Konwersja: przeglądarka odczytuje nieprzetworzone bajty HTML z dysku lub sieci i tłumaczy je na poszczególne znaki na podstawie kodowania pliku (np. UTF-8).
- Tokenizacja: przeglądarka konwertuje ciągi znaków na odrębne tokeny zgodnie ze standardem W3C HTML5, np. „<html>”, „<body>” i inne ciągi w nawiasach kątowych. Każdy token ma specjalne znaczenie i ma własny zestaw reguł.
- Lexing: wydane tokeny są konwertowane w „obiekty”, które definiują ich właściwości i reguły.
- Konstrukcja DOM: znacznik HTML definiuje relacje między różnymi tagami (niektóre tagi są zawarte w innych tagach), więc utworzone obiekty są połączone w strukturę danych drzewa, która uwzględnia również relacje nadrzędny-podrzędny zdefiniowane w pierwotnych znacznikach. Obiekt HTML jest nadrzędnym wobec obiektu body, element body jest nadrzędnym wobec obiektu paragraph itd.
Ostatecznym wynikiem tego procesu jest obiektowy model dokumentu (Document Object Model, DOM) naszej prostej strony, którego przeglądarka używa do dalszego przetwarzania strony.
Za każdym razem, gdy przeglądarka przetwarza znaczniki HTML, przechodzi przez wszystkie powyższe czynności: konwertuje bajty na znaki, identyfikuje tokeny, konwertuje je na węzły i buduje drzewo DOM. Cały proces może trochę potrwać, zwłaszcza jeśli przetwarzamy dużą ilość kodu HTML.
Jeśli otworzysz Narzędzia deweloperskie w Chrome i zapiszesz oś czasu podczas wczytywania strony, zobaczysz rzeczywisty czas potrzebny na wykonanie tego kroku – w przykładzie powyżej przekonwertowanie fragmentu kodu HTML na drzewo DOM zajęło nam około 5 ms. W przypadku większej strony ten proces może potrwać znacznie dłużej. Podczas tworzenia płynnych animacji może to spowalniać pracę, jeśli przeglądarka musi przetwarzać duże ilości kodu HTML.
Drzewo DOM rejestruje właściwości i relacje znaczników dokumentu, ale nie informuje, jak element będzie wyglądał po wyrenderowaniu. To jest odpowiedzialność CSSOM.
Obiektowy model CSS (CSSOM)
Podczas tworzenia modelu DOM naszej prostej strony przeglądarka napotkała w sekcji nagłówka tag linku z odniesieniem do zewnętrznego arkusza stylów CSS: style.css. Przewidując, że ten zasób będzie potrzebny do wyrenderowania strony, od razu wysyła żądanie dotyczące tego zasobu, które zwraca taką treść:
body {
font-size: 16px;
}
p {
font-weight: bold;
}
span {
color: red;
}
p span {
display: none;
}
img {
float: right;
}
Mogliśmy zadeklarować style bezpośrednio w znacznikach HTML (w tekście), ale zapewnienie niezależności CSS od HTML umożliwia nam osobne traktowanie treści i projektu: projektanci mogą pracować nad CSS, programiści mogą skupić się na HTML itd.
Podobnie jak w przypadku języka HTML musimy przekonwertować otrzymane reguły CSS do postaci, którą przeglądarka zrozumie i będzie mogła wykorzystać. Dlatego powtarzamy proces HTML, ale dla CSS zamiast HTML:
Bajty CSS są konwertowane na znaki, następnie tokeny i węzły. Na koniec łączą się one w strukturę drzewa znaną jako „obiektowy model CSS” (CSSOM):
Dlaczego CSSOM ma strukturę drzewa? Podczas obliczania końcowego zestawu stylów dla dowolnego obiektu na stronie przeglądarka zaczyna od najbardziej ogólnej reguły dotyczącej tego węzła (np. jeśli jest to element podrzędny elementu body, wówczas obowiązują wszystkie style treści), a następnie rekurencyjnie dopracowuje obliczone style, stosując bardziej szczegółowe reguły, czyli reguły „kaskadowe”.
Aby zobaczyć bardziej konkretne informacje, weź pod uwagę drzewo CSSOM powyżej. Każdy tekst w tagu <span> umieszczony w elemencie treści, ma czcionkę o rozmiarze 16 pikseli i zawiera czerwony tekst. Instrukcja font-size spada kaskadowo z body do span. Jeśli jednak tag span jest podrzędny tagu akapitu (p), jego treść nie jest wyświetlana.
Zwróć uwagę, że powyższe drzewo nie jest pełnym drzewem CSSOM i pokazuje tylko style, które zdecydowaliśmy się zastąpić w naszym arkuszu stylów. Każda przeglądarka zapewnia domyślny zestaw stylów, zwany także „stylami klienta użytkownika”, który widzimy, gdy nie zapewniamy żadnego własnego, a nasze style po prostu zastępują te style.
Aby dowiedzieć się, jak długo trwa przetwarzanie CSS, możesz zarejestrować oś czasu w DevTools i wyszukać zdarzenie „Recalculation Style” (Ponowne obliczenie stylu). W przeciwieństwie do analizy DOM oś czasu nie wyświetla osobnego wpisu „Parse CSS” i zamiast tego rejestruje analizę i konstrukcję drzewa CSSOM, a także rekurencyjne obliczenia stylów obliczonych w ramach tego jednego zdarzenia.
Przetwarzanie naszego prostego arkusza stylów zajmuje ok.0, 6 ms i ma wpływ na 8 elementów strony – niewiele, ale jest ono wciąż bezpłatne. Skąd jednak wzięło się tych osiem elementów? CSSOM i DOM to niezależne struktury danych. Okazuje się, że przeglądarka ukrywa ważny krok. Przejdźmy teraz do drzewa renderowania, które łączy ze sobą elementy DOM i CSSOM.