Middle
Jak przebiega renderowanie strony dla użytkownika?
sobes.tech AI
Odpowiedź od AI
- Użytkownik wpisuje URL w przeglądarce. Przeglądarka wysyła zapytanie DNS, aby uzyskać adres IP serwera.
- Przeglądarka nawiązuje połączenie TCP z serwerem. Zazwyczaj używa się protokołu HTTP/S.
- Przeglądarka wysyła żądanie HTTP do serwera. Żądane są dokument HTML i inne zasoby (CSS, JavaScript, obrazy).
- Serwer przetwarza żądanie i wysyła odpowiedź HTTP. Odpowiedź zawiera żądane zasoby i informacje o statusie.
- Przeglądarka otrzymuje dokument HTML. Rozpoczyna się parsowanie HTML.
- Tworzony jest DOM (Document Object Model). Drzewo obiektów reprezentujące strukturę HTML.
- Przeglądarka wykrywa w HTML odnośniki do zewnętrznych zasobów (CSS, JavaScript, obrazy). Wykonywane są dodatkowe zapytania w celu ich pobrania.
- Przeglądarka otrzymuje style CSS. Rozpoczyna się parsowanie CSS.
- Tworzony jest CSSOM (CSS Object Model). Drzewo obiektów reprezentujące style.
- Tworzona jest drzewo renderowania. Połączenie DOM i CSSOM. Zawiera tylko widoczne elementy i ich style.
- Layout (lub Reflow). Obliczane są geometria i pozycja każdego elementu na stronie.
- Paint (lub Repaint). Elementy są rysowane na ekranie zgodnie z ich stylami i pozycją.
- Kompozycja. Strona jest składana warstwa po warstwie do wyświetlenia użytkownikowi.
- Przeglądarka otrzymuje pliki JavaScript. Rozpoczyna się parsowanie i wykonywanie kodu. JavaScript może modyfikować DOM i CSSOM, co prowadzi do ponownego obliczenia Layout i Paint.
- Wyświetlenie strony użytkownikowi. W miarę otrzymywania zasobów i kończenia kroków, użytkownik widzi zawartość strony.