Aby łatwiej podejmować decyzje odnośnie zmian na stronie, powinieneś nieco więcej dowiedzieć się o:
- procesie renderowania w przeglądarce,
- fazach, jakie muszą zajść, zanim cokolwiek zostanie wyrenderowanie na stronie,
- drzewach CSSOM, DOM oraz docelowo „Render Tree”.
Najprościej ujmując: DOM to interfejs API, który jest udostępniany przez przeglądarkę w celu zrozumienia przesyłanego dokumentu HTML/CSS. Przeglądarka nie zacznie niczego renderować do czasu, aż pewne zasoby nie zostaną załadowane jako pierwsze i nie zostanie utworzone drzewo DOM i CSSOM.
Oto cztery kroki, jakie musi zrobić przeglądarka, aby stworzyć model DOM dla Twojej strony:
- Konwersja – przeglądarka za pomocą nagłówka HTTP (Content-Type) wie, w jaki sposób przetworzyć przesłane pierwsze bajty pliku HTML na znaki oraz w jakim kodowaniu je dalej przetwarzać.
- Przesłany ciąg znaków jest zamieniany na tzw. tokeny, które posiadają specjalne znaczenie i zestaw reguł.
- Analizator leksykalny (tzw. lekser) wyodrębnia tokeny z cykli danych wejściowych i przekształca w pojedyncze obiekty z odpowiednimi właściwościami.
- Znaczniki HTML są skorelowane z konkretnymi tagami i razem tworzą się obiekty, które generują strukturę podobną do drzewa. Przykładowo obiekt „div” jest podrzędnym obiektem „body”, a ten należy do obiektu „html”. Liczba zagłębień może być bardzo duża. Końcowym efektem takiej „układanki” staje się właśnie obiektowy model dokumentu (DOM), którym przeglądarka, jak i programiści mogą zarządzać.
Podczas tworzenia modelu DOM przeglądarka natrafia na arkusze stylów CSS, które od razu tworzą osobny cykl tworzenia CSSOM. Cały proces tworzenia CSSOM ze znacznikami CSS wygląda bardzo podobnie: czyli najpierw bajty pliku CSS są zamieniane na znaki, następnie na tokeny i węzły, a docelowo łączone są w strukturę drzewa określaną jako CSS Object Model.
Gdy przeglądarka ma stworzone modele DOM i CSSOM (niezależne obiekty opisujące treść i style), łączy je tworząc tzw. drzewo renderowania (każdy węzeł DOM ma przypisane informacje o stylach z modelu CSSOM). Wówczas na ekranie pojawiają się piksele, które rozmieszczane są na stronie według obliczonego położenia i rozmiaru. Pomijane są meta-tagi lub tagi skryptów, gdyż nie mają one wpływu na docelowy renderowany obraz.
Gdy przeglądarka utworzy już tzw. „Render Tree” następuje etap wyznaczania układu strony,
czyli dokładnego położenia względem innych elementów – wszystkie są rozmieszczane od korzenia drzewa renderowania.
Po wyznaczeniu stylów i geometrii elementów następuje ostatni etap, czyli tzw. malowanie. W nim każdy węzeł drzewa renderowania jest przekształcany w rzeczywiste piksele na ekranie.
Jak można logicznie wywnioskować, faza malowania wymaga wiele czasu i wymaga od przeglądarki wykonania ogromnej liczby czynności. Aby zobaczyć, ile dokładnie czasu zajmuje każdy z etapów, z pomocą przychodzi narzędzie Chrome DevTools:
Oto wszystkie najważniejsze kroki, jakie musi wykonać przeglądarka:
- Przetwarzanie kodu HTML i znaczników dla stworzenia drzewa DOM.
- Przetwarzanie kodu CSS i jego znaczników dla stworzenia drzewa CSSOM.
- Stworzenie Render Tree przy połączeniu DOM i CSSOM.
- Na bazie drzewa renderowania określenie układu strony i geometrii każdego węzła.
- Malowanie każdego węzła na ekranie.
To oczywiście skrócony opis, ponieważ cały proces wymaga w rzeczywistości bardzo wielu czynności (to m.in. dlatego na starszych i słabszych wydajnościowo urządzeniach nowoczesne i zaawansowane technologicznie strony internetowe długo się ładują).
Co ważne, każda modyfikacja drzewa DOM i CSSOM wymaga powtórzenia całego procesu od nowa, aby przeglądarka mogła ustalić prawidłowe ułożenie renderowanych pikseli. Optymalizacji powinien więc ulec całkowity czas wykonania powyższych kroków, który zależy od:
- rozmiaru dokumentu,
- użytych stylów CSS,
- wydajności urządzeniem, które oblicza te wszystkie dane.
Im mniej skomplikowany będzie Twój kod i prostsze funkcje, tym szybciej wyrenderujesz dany obraz.