Cesta URL: co se děje, než se načte webová stránka

Když do adresního řádku prohlížeče napíšete webovou adresu a stisknete Enter, spustí se fascinující řetězec procesů, které propojují váš počítač s celým světem. Od překladu doménového jména na IP adresu, přes navázání šifrovaného spojení, až po vykreslení každého pixelu na obrazovce - to všechno se odehraje během zlomků sekundy. Pojďme se podívat, co se mezitím děje pod kapotou webu.

Celý článek

Napíšete do adresního řádku https://priklad123.com a za chvíli se stránka načte. Vypadá to poměrně jednoduše, ale pod povrchem se rozběhne řetězec procesů, které zahrnují operační systém, DNS, TLS, HTTP a nakonec samotný renderovací engine prohlížeče. Pojďme si projít, co všechno se děje krok za krokem.

1. Parsování URL

Prohlížeč nejdřív musí pochopit, co jsme vlastně zadali. Toto jsou totiž všechno rozdíly:

• priklad123.com
• https://priklad123.com
• file:///home/user/test.html

Zadáte-li pouze název, prohlížeč zkusí odhadnout, zda jde o vyhledávací dotaz nebo doménu. Poté z URL rozpozná:

• protokol (https, http, ftp, …),
• hostname (example.com),
• port (443 pro HTTPS nebo 80 pro HTTP),
• path, query string, fragment.

2. Vyhledání IP adresy – DNS resolving

Prohlížeč musí zjistit, na jakou IP adresu se má připojit. To obstará DNS (Domain Name System) resolver:

1. Podívá se do browser cache.
2. Pokud nic nenajde, zkusí operační systém (OS DNS cache).
3. Pak dotaz putuje na ISP (internet service provider)DNS server
4. Ten zjistí z autoritativních DNS serverů příslušný záznam (A pro IPv4, AAAA pro IPv6).

Tento proces umožní prohlížeči aby efektivně přeložil název domény do IP adresy.

3. Navázání TCP spojení

Prohlížeč ví, kam se připojit, a otevře TCP (Transmission Control Protocol)socket na portu 443 (pro HTTPS).
Proběhne tříkrokový handshake:

1. SYN – klient žádá o spojení
2. SYN-ACK – server potvrzuje
3. ACK – klient potvrzuje a spojení je otevřeno

4. TLS handshake (šifrované spojení)

Protože jde o https://, navazuje se TLS(Transport Layer Security):

• Prohlížeč a server si dohodnou verzi TLS ašifrovací sadu.
• Server pošle svůj certifikát, který prohlížeč ověří vůči CA (Certificate Authority).
• Vymění si klíče (asymetrická kryptografie) a vytvoří symetrický klíč pro šifrování dat.

Po dokončení handshake je vytvořen šifrovaný kanál, po kterém už tečou data (HTTP requesty a response).

5. HTTP request

Nyní prohlížeč odešle první HTTP request:

GET / HTTP/1.1// Požadavek na hlavní stránku pomocí metody GETHost: example.com                 // Cílová doména, na kterou se požadavek posílá
User-Agent: Mozilla/5.0 ...       // Identifikace klienta Accept: text/html,application/xhtml+xml  // Jaké typy obsahu klient přijímá 
Accept-Encoding: gzip, deflate, br       // Jaké komprese server může použít Connection: keep-alive            // Žádost o ponechání TCP spojení otevřeného pro další požadavky

Zpráva může být komprimována, a obsahuje i cookies, cache informace nebo tokeny.

6. Server zpracuje požadavek

Na serveru běží například Nginx nebo Apache, který požadavek předá dál:

• statickému souboru (HTML, CSS, JS)
• nebo dynamické aplikaci (např. Node.js, PHP, Python)

Server vygeneruje odpověď a pošle ji zpět:

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 1024
Cache-Control: max-age=3600

7. Přijetí odpovědi a dekódování

Prohlížeč přečte data z TCP streamu, rozbalí je, a předá obsah renderovacímu enginu (např. Blink v Chromiu, Gecko ve Firefoxu).

8. Parsování a renderování stránky

Teď začíná „viditelná“ část:

1. HTML parser vytvoří DOM strom.
2. CSS parser vytvoří CSSOM.
3. JS může DOM upravit.
4. DOM + CSSOM se spojí do Render Tree.
5. Layout engine vypočítá pozice prvků.
6. GPU proces vykreslí pixely na obrazovku.

Během toho může stránka načítat další zdroje (obrázky, fonty, skripty, iframy). Ty opět spouštějí DNS/TCP/TLS cykly.

9. Caching, prefetch, service workers

Prohlížeč se snaží být chytrý:

• Používá cache (ETag, Last-Modified).
• Může využít HTTP/2 multiplexing – více požadavků v jednom spojení.
• Pokud stránka podporuje Service Worker, data mohou být načtena i offline.

10. Zobrazení a interakce

Nakonec vidíme stránku. Ale i po vykreslení může prohlížeč dál:

• načítat obrázky
• provádět JavaScript
• sledovat uživatelské akce a reagovat