Opublikowano: 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.
- Oznaczenia HTML są przekształcane w model obiektów dokumentu (DOM), a oznaczenia CSS – w model obiektów CSS (CSSOM).
- DOM i CSSOM to niezależne struktury danych.
- Panel wydajności w Narzędziach deweloperskich w Chrome umożliwia rejestrowanie i sprawdzanie kosztów 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 możliwego 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).
- Tokenizacja: przeglądarka konwertuje ciągi znaków na różne
tokeny – zgodnie ze standardem W3C HTML5.
na przykład
<html>,<body>– i inne ciągi w obrębie nawiasy kątowe. Każdy token ma specjalne znaczenie i własny zestaw reguł. - Lexing: emitowane tokeny są konwertowane na „obiekty”, które definiują ich właściwości i reguły.
- Konstrukcja DOM: ponieważ znaczniki HTML definiują relacje między różnymi tagami (niektóre tagi znajdują się w innych tagach), utworzone obiekty są połączone w strukturę drzewa, która przechwytuje również relacje nadrzędne-podrzędne zdefiniowane w oryginalnych znacznikach: HTML obiekt nadrzędny obiektu body, element body jest elementem nadrzędnym dla obiektu paragraph, aż zostanie utworzona cała reprezentacja dokumentu.
ostatecznym wynikiem całego procesu jest model Document Object Model (DOM). naszej prostej strony, której przeglądarka używa do dalszego przetwarzania
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 ten 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łynne animacje, to może spowalniać pracę przeglądarki. przetwarzają 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. Jest to odpowiedzialność CSSOM.
Model obiektów CSS (CSSOM)
Podczas tworzenia elementu 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. przypuszczając, że ten zasób będzie potrzebny do wyrenderowania
natychmiast wysyła żądanie dotyczące tego zasobu, które zwraca
z następującą treścią:
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, a także na innych kwestiach.
Tak jak w przypadku kodu HTML, musimy przekonwertować otrzymane reguły CSS na coś, które 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 tokeny, a następnie węzły a ostatecznie są połączone w strukturę drzewa znaną jako „obiektowy model CSS”. (CSSOM):
Dlaczego CSSOM ma strukturę drzewa? Podczas obliczania końcowego zbioru stylów dowolnego obiektu na stronie, przeglądarka rozpoczyna się od najbardziej ogólnego atrybutu ma zastosowanie do danego węzła (jeśli na przykład jest on elementem podrzędnym elementu potem mają zastosowanie wszystkie style nadwozia), a potem rekurencyjnie udoskonala obliczone style przez zastosowanie bardziej szczegółowych reguł; czyli zasady „spadają kaskadowo 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 element span jest elementem podrzędnym elementu
paragraph (p), jego zawartość nie zostanie wyświetlona.
Zwróć też uwagę, że opisane wcześniej drzewo nie jest kompletnym drzewem CSSOM i pokazuje tylko style, które zdecydowaliśmy się zastąpić w arkuszu stylów. Każda przeglądarka zapewnia domyślny zestaw stylów, nazywany również „stylami klienta użytkownika”. widzimy, kiedy nie udostępniamy żadnych własnych – a nasze style zastępują te domyślnych.
Aby dowiedzieć się, ile czasu zajmuje przetwarzanie CSS, możesz zarejestrować ścieżkę czasową w DevTools i poszukać zdarzenia „Przelicz styl”: w przeciwieństwie do analizy DOM ścieżka czasowa nie zawiera osobnego wpisu „Rozłóż CSS”, a zamiast tego rejestruje analizę i konstrukcję drzewa CSSOM oraz rekurencyjne obliczanie obliczonych stylów w ramach tego jednego zdarzenia.
Przetwarzanie naszej małej grupy stylów zajmuje około 0,6 ms i wpływa na 8 elementów na stronie – nie jest to dużo, ale z nowego nie jest to bezpłatne. Gdzie jednak skąd pochodzi 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.