Data publikacji: 31 marca 2014 r.
Zanim przeglądarka będzie mogła wyrenderować stronę, musi utworzyć drzewa DOM i CSSOM. Dlatego musimy jak najszybciej przesłać do przeglądarki kod HTML i CSS.
Podsumowanie
- Bajty → znaki → tokeny → węzły → model obiektu.
- Znaczniki HTML są przekształcane w DOM. Znaczniki CSS są przekształcane w obiektowy model CSS (CSSOM).
- DOM i CSSOM to niezależne struktury danych.
- Panel wydajności w Narzędziach deweloperskich w Chrome pozwala nam rejestrować i sprawdzać koszty tworzenia i przetwarzania DOM oraz 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>
Zacznij od najprostszego przypadku: zwykłej strony HTML z tekstem i jednym obrazem. Jak przeglądarka przetwarza tę stronę?
- Konwersja: przeglądarka odczytuje nieprzetworzone bajty kodu HTML z dysku lub sieci i przekształci je w poszczególne znaki na podstawie określonego kodowania pliku (np. UTF-8).
- Toksykacja: przeglądarka zamienia ciągi znaków w odrębne tokeny (zgodnie ze standardem W3C HTML5, np.
<html>,<body>) oraz inne ciągi znaków w nawiasach klamrowych. Każdy token ma specjalne znaczenie i własny zestaw reguł. - Lexing: wysyłane tokeny są konwertowane na „obiekty”, które definiują ich właściwości i reguły.
- Tworzenie modelu DOM: ponieważ znaczniki HTML definiują relacje między różnymi tagami (niektóre tagi są zawarte w innych tagach), utworzone obiekty są połączone w strukturę danych drzewa, która obejmuje również relacje nadrzędny–podrzędny zdefiniowane w pierwotnym znaczniku: obiekt HTML jest nadrzędnym obiektu body, a ten jest nadrzędnym obiektu paragraph, aż do utworzenia całej reprezentacji dokumentu.
Ostatnim wynikiem tego procesu jest obiektowy model dokumentu (Document Object Model, DOM) naszej prostej strony, na podstawie którego przeglądarka przetwarza stronę.
Za każdym razem, gdy przeglądarka przetwarza znaczniki HTML, wykonuje wszystkie wcześniej zdefiniowane kroki: konwertuje bajty na znaki, identyfikuje tokeny, przekształca tokeny w węzły i tworzy drzewo DOM. Cały proces może zająć trochę czasu, zwłaszcza jeśli mamy do przetworzenia dużą ilość kodu HTML.
Jeśli otworzysz Narzędzia deweloperskie w Chrome i nagranie zostanie wykonane podczas wczytywania strony, zobaczysz rzeczywisty czas wykonania tego kroku. W poprzednim przykładzie przekształcenie fragmentu kodu HTML w drzewo DOM zajęło około 5 ms. W przypadku większej strony może to potrwać znacznie dłużej. Podczas tworzenia płynnych animacji może to stać się wąskim gardłem, jeśli przeglądarka musi przetwarzać duże ilości kodu HTML.
Drzewo DOM zawiera właściwości i relacje znaczników dokumentu, ale nie informuje, jak element będzie wyglądał po renderowaniu. Jest to odpowiedzialność CSSOM.
Model obiektów CSS (CSSOM)
Podczas tworzenia modelu DOM naszej podstawowej strony przeglądarka napotkała w elementach <head> dokumentu element <link> odwołujący się do zewnętrznego arkusza stylów CSS: style.css. Wiedząc, że potrzebuje tego zasobu do renderowania strony, natychmiast wysyła żądanie tego zasobu, które zwraca te dane:
body {
font-size: 16px;
}
p {
font-weight: bold;
}
span {
color: red;
}
p span {
display: none;
}
img {
float: right;
}
Style można zadeklarować bezpośrednio w tagach HTML (w ramach), ale utrzymywanie CSS niezależnie od HTML pozwala traktować zawartość i projektowanie jako osobne kwestie: projektanci mogą pracować nad CSS, a deweloperzy mogą skupić się na kodzie HTML oraz innych kwestiach.
Podobnie jak w przypadku HTML, musimy przekonwertować otrzymane reguły CSS na coś, co przeglądarka może zrozumieć i z niego korzystać. Dlatego powtarzamy proces HTML, ale dla CSS zamiast HTML:
Bajty CSS są konwertowane na znaki, potem na tokeny, a następnie na węzły, które są w końcu łączone w strukturę drzewiastą zwaną „modelem obiektów CSS” (CSSOM):
Dlaczego usługa CSSOM ma strukturę drzewiastą? Podczas obliczania końcowego zestawu stylów dla dowolnego obiektu na stronie przeglądarka zaczyna od najbardziej ogólnej reguły mającej zastosowanie do danego węzła (jeśli np. jest to element podrzędny elementu body, wtedy wszystkie style te są stosowane), a następnie rekurencyjnie dopracowuje obliczone style, stosując bardziej szczegółowe reguły, czyli reguły „składają się w dół”.
Aby lepiej to zobrazować, weź pod uwagę drzewo CSSOM opisane wcześniej. Tekst zawarty w tagu <span> umieszczonym w elemencie body ma rozmiar czcionki 16 pikseli i jest czerwony. Instrukcja font-size jest przekazywana kaskadowo z elementu body do elementu span. Jeśli jednak tag span jest elementem podrzędnym tagu akapitu (p), jego zawartość nie jest wyświetlana.
Pamiętaj też, że opisany wcześniej diagram nie jest pełnym drzewem CSSOM i pokazuje tylko style, które postanowiliśmy zastąpić w naszej arkuszu stylów. Każda przeglądarka udostępnia domyślny zestaw stylów, nazywany również „stylami klienta użytkownika” (to jest to, co widać, jeśli nie udostępniamy żadnych własnych), a nasze style zastępują te style domyślne.
Aby dowiedzieć się, ile czasu zajmuje przetwarzanie CSS, możesz nagrać osi czasu w DevTools i poszukać zdarzenia „Przelicz styl”: w przeciwieństwie do analizy DOM linia czasu nie pokazuje oddzielnego wpisu „Rozłóż CSS”, a zamiast tego rejestruje analizę i konstrukcję drzewa CSSOM oraz rekurencyjne obliczanie obliczonych stylów w ramach tego jednego zdarzenia.
Przetworzenie prostego stylu zajmuje ok.0, 6 ms i ma wpływ na 8 elementów na stronie – i to niewiele, ale jest ono bezpłatne. Skąd jednak pochodzą te 8 elementów? CSSOM i DOM to niezależne struktury danych. Okazuje się, że przeglądarka ukrywa ważny krok. Następnie omówimy drzewo renderowania, które łączy ze sobą DOM i CSSOM.