Jak renderuje się strona: parsowanie, DOM, CSSOM, układ i malowanie
Zobacz, co przeglądarka robi z bajtami HTML i CSS: buduje DOM i CSSOM, oblicza układ oraz maluje piksele.
Jak renderuje się strona: parsowanie, DOM, CSSOM, układ i malowanie to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Od bajtów do pikseli
Gdy przeglądarka otrzymuje od serwera bajty HTML, wieloetapowy proces przekształca je w piksele widoczne na ekranie. Znajomość tego procesu pomaga optymalizować wydajność i rozumieć przyczyny błędów wizualnych.
Krok 1 — Analizowanie HTML: budowanie DOM
Parser HTML przeglądarki odczytuje strumień bajtów i tworzy Document Object Model (DOM) — drzewo węzłów reprezentujących każdy element HTML, węzeł tekstowy i komentarz w dokumencie.
<!-- This HTML... -->
<div>
<p>Hello</p>
</div>
// ...becomes a DOM tree:
// Document
// └── html
// └── body
// └── div
// └── p
// └── 'Hello'Krok 2 — Analizowanie CSS: budowanie CSSOM
Jednocześnie bajty CSS są analizowane i przekształcane w CSS Object Model (CSSOM) — drzewo reguł stylów. CSS blokuje renderowanie: przeglądarka nie wyświetli pikseli, dopóki nie obliczy stylów widocznej treści.
Krok 3 — drzewo renderowania
Przeglądarka łączy DOM i CSSOM w drzewo renderowania. Uwzględniane są tylko widoczne węzły — elementy z właściwością display:none są pomijane. Każdy węzeł drzewa renderowania zawiera obliczony styl, z którym zostanie wyświetlony.
Krok 4 — układ (reflow)
Układ oblicza dokładne położenie i rozmiar każdego węzła drzewa renderowania, korzystając z modelu pudełkowego i szerokości obszaru widoku. Ten proces nazywa się również reflow. Obliczanie układu jest kosztowne, dlatego należy unikać wielokrotnego wywoływania go w JavaScript.
Krok 5 — malowanie
Malowanie przekształca układ w rzeczywiste piksele na ekranie. Przeglądarka rysuje warstwa po warstwie tła, obramowania, tekst i obrazy. Niektóre elementy tworzą własne warstwy kompozycji na potrzeby renderowania przyspieszanego przez GPU.
Krok 6 — kompozycja
Kompozytor przeglądarki łączy pomalowane warstwy w końcową klatkę i wysyła ją na ekran. Używanie właściwości transform i opacity do animacji pozwala kompozytorowi wykonywać je na GPU, całkowicie pomijając obliczanie układu i malowanie.
Co blokuje renderowanie?
CSS w elemencie <head> blokuje renderowanie. JavaScript domyślnie blokuje zarówno parser, jak i renderowanie. Należy używać atrybutu defer w znacznikach script, aby analizować JS po HTML bez blokowania renderowania.
<script src="app.js" defer></script>Krytyczna ścieżka renderowania
Krytyczna ścieżka renderowania to sekwencja od otrzymania bajtów HTML do wyświetlenia pierwszego piksela. Jej optymalizacja polega na ograniczeniu liczby i rozmiaru zasobów blokujących renderowanie oraz odroczeniu ładowania niekrytycznego JS i CSS.
Reflow a repaint
Zmiana właściwości układu (width, margin, position) wywołuje reflow i repaint. Zmiana właściwości wpływających wyłącznie na wygląd (color, background) wywołuje tylko repaint. Zmiana transform lub opacity uruchamia wyłącznie kompozycję. Należy wybierać najmniej kosztowną operację.
DevTools: wyświetlanie osi czasu malowania
W narzędziach Chrome DevTools należy otworzyć panel Performance, zarejestrować ładowanie strony i przeanalizować wykres wodospadowy. Widoczne będą zielone zdarzenia Painting, co pozwoli zidentyfikować elementy powodujące kosztowne obliczanie układu.
Szybki test
Który etap oblicza dokładny rozmiar i położenie każdego elementu na stronie?
Podsumowanie: proces renderowania
HTML → DOM → CSSOM → drzewo renderowania → układ → malowanie → kompozycja. Każdy etap przekazuje wynik kolejnemu. Optymalizacja krytycznej ścieżki renderowania polega na skróceniu tego procesu, aby pierwsza widoczna treść pojawiła się jak najszybciej.
Często zadawane pytania
Czy lekcja „Jak renderuje się strona: parsowanie, DOM, CSSOM, układ i malowanie” jest bezpłatna?
Tak — pełny tekst „Jak renderuje się strona: parsowanie, DOM, CSSOM, układ i malowanie” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Jak renderuje się strona: parsowanie, DOM, CSSOM, układ i malowanie”?
Zobacz, co przeglądarka robi z bajtami HTML i CSS: buduje DOM i CSSOM, oblicza układ oraz maluje piksele. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.
Ile czasu zajmuje lekcja „Jak renderuje się strona: parsowanie, DOM, CSSOM, układ i malowanie”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?
Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Przeglądarki, DNS i HTTP: cykl życia żądania
- HTML, CSS i JavaScript: zadania poszczególnych warstw
- Jak renderuje się strona: parsowanie, DOM, CSSOM, układ i malowanie
- Narzędzia deweloperskie: otwieranie i korzystanie z DevTools