Jak ładuje się strona internetowa?

Użytkownik wpisuje adres URL w pasek adresu przeglądarki lub klika na link.
Parsowanie URL: Przeglądarka analizuje URL, aby określić protokół, domenę, port i ścieżkę.
Wyszukiwanie adresu IP: Przeglądarka sprawdza pamięć podręczną DNS, następnie pamięć podręczną systemu operacyjnego, następnie pamięć podręczną routera. Jeśli adres nie zostanie znaleziony lokalnie, wysyła zapytanie do serwera DNS, aby uzyskać adres IP nazwy domeny.
Ustanowienie połączenia TCP (Handshake): Przeglądarka ustanawia połączenie TCP z serwerem, korzystając z uzyskanego adresu IP (trójstronne uzgadnianie: SYN -> SYN-ACK -> ACK).
Wysyłanie żądania HTTP: Przeglądarka wysyła żądanie HTTP (zwykle GET) do serwera, wskazując żądany zasób (ścieżkę), nagłówki (User-Agent, Accept-Encoding, Cookie itp.) oraz ciało żądania (jeśli istnieje).
```
GET /index.html HTTP/1.1  
Host: example.com  
User-Agent: Mozilla/5.0 ...  
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8  
```
Przetwarzanie żądania przez serwer: Serwer odbiera żądanie, przetwarza je (np. uruchamia skrypty po stronie serwera) i generuje odpowiedź HTTP.
Wysyłanie odpowiedzi HTTP: Serwer wysyła odpowiedź HTTP z powrotem do przeglądarki. Odpowiedź zawiera kod statusu (np. 200 OK), nagłówki (Content-Type, Content-Length, Cache-Control itp.) oraz ciało odpowiedzi (zawartość żądanego zasobu, np. plik HTML).
```
HTTP/1.1 200 OK  
Content-Type: text/html; charset=UTF-8  
Content-Length: 12345  
Cache-Control: max-age=3600  

<!DOCTYPE html>  
<html>  
<head>...</head>  
<body>...</body>  
</html>  
```
Analiza HTML i tworzenie DOM: Przeglądarka zaczyna odbierać kod HTML i go analizować, tworząc model obiektu dokumentu (DOM - Document Object Model) w pamięci. DOM reprezentuje drzewo elementów HTML.
Ładowanie i przetwarzanie zasobów: Podczas analizy HTML, przeglądarka napotyka odnośniki do innych zasobów (CSS, JavaScript, obrazy, czcionki itp.). Dla każdego zasobu powtarzają się kroki 3-7 (wyszukiwanie IP, połączenie TCP (jeśli konieczne), żądanie/odpowiedź HTTP). Ładowanie tych zasobów może odbywać się równolegle (ograniczone liczbą jednoczesnych połączeń).
Budowa CSSOM: Przeglądarka analizuje pliki CSS i bloki <style> w HTML, tworząc model obiektu CSS (CSSOM - CSS Object Model). CSSOM reprezentuje style, które można zastosować do elementów na stronie.
Budowa drzewa renderowania: Przeglądarka łączy DOM i CSSOM, aby zbudować drzewo renderowania (Render Tree). Drzewo renderowania zawiera tylko widoczne elementy strony i ich style. Elementy z display: none nie są uwzględniane.
Layout (Reflow): Przeglądarka oblicza dokładne pozycje i rozmiary każdego elementu na podstawie drzewa renderowania, rozmiarów okna widoku i stylów.
Malowanie (Repaint): Przeglądarka rysuje każdy element na ekranie w obliczonych pozycjach i z zastosowanymi stylami. Dzieje się to na warstwach.
Kompozycja: Przeglądarka łączy narysowane warstwy w końcowy obraz wyświetlany na ekranie użytkownika.
Wykonanie JavaScript: W miarę ładowania i analizowania skryptów, kod JavaScript jest wykonywany. Wykonanie JavaScript może wpływać na DOM i CSSOM, wywołując powtarzające się kroki Layout i Painting (Reflow/Repaint).

Kluczowe etapy wyświetlania treści:

DOMContentLoaded: Zdarzenie wywołuje się, gdy przeglądarka w pełni załadowała i przeanalizowała dokument HTML oraz zbudowała drzewo DOM, ale oczekuje na załadowanie arkuszy stylów, obrazów i ramek podrzędnych.
Load: Zdarzenie wywołuje się, gdy cała strona, w tym obrazy, skrypty, style i inne zasoby, jest w pełni załadowana.