Jak funguje webový prohlížeč

00:00:00

Napíšeš adresu, stiskneš Enter a za vteřinu máš na obrazovce stránku. Co se přitom děje? Pochopení tohoto procesu ti pomůže lépe ladit problémy, optimalizovat výkon stránek a chápat, proč se určité věci chovají tak, jak se chovají.

Krok 1 – DNS: překlad adresy na IP

Prohlížeč nejdříve potřebuje zjistit, kde na internetu hledat server pro zadanou adresu. Lidé píší adresy jako crazy-mac.cz, ale počítače komunikují přes čísla – IP adresy jako 185.207.132.45.

Toto přeložení zařídí DNS (Domain Name System) – internetický telefonní seznam. Prohlížeč se zeptá DNS serveru: „Jaká je IP adresa pro crazy-mac.cz?\" a DNS odpoví číslem.

Výsledek se uloží do cache – příště se prohlížeč neptá znovu, ale použije uloženou hodnotu. Proto se někdy stane, že po změně serveru web ještě hodiny ukazuje starý obsah – DNS cache ještě nebyla obnovena.

Krok 2 – HTTP požadavek

Jakmile prohlížeč zná IP adresu, pošle serveru HTTP požadavek (HyperText Transfer Protocol). Je to zpráva ve standardizovaném formátu, která říká:

  • Co chci stáhnout (např. GET /index.html).
  • Jaký prohlížeč jsem (User-Agent).
  • Jaké jazyky preferuji (Accept-Language).
  • Jestli mám uložené soubory z předchozí návštěvy (If-Modified-Since).

Dnes se používá zabezpečená varianta HTTPS (S jako Secure) – přenos dat je šifrovaný. Proto webové adresy začínají https:// a prohlížeč u nich zobrazuje zámek. Bez HTTPS by data (hesla, formuláře) cestovala sítí jako čitelný text.

Krok 3 – HTTP odpověď a stavové kódy

Server odpoví také ve standardizovaném formátu. Součástí odpovědi je stavový kód, který říká, jak požadavek dopadl:

  • 200 OK – vše v pořádku, soubor byl nalezen a posílá se.
  • 301 Moved Permanently – stránka se přesunula, přesměrování na novou adresu.
  • 304 Not Modified – soubor se od posledního stažení nezměnil, použij cache.
  • 404 Not Found – stránka nebyla nalezena. Nejčastější chyba.
  • 500 Internal Server Error – chyba na straně serveru.

Stavové kódy uvidíš v DevTools (záložka Network) – jsou nezbytné při ladění problémů s načítáním souborů.

Krok 4 – parsování HTML a stavba DOM

Prohlížeč dostane HTML jako prostý text. Začne ho číst od začátku a postupně ho převádí do stromové struktury – DOM (Document Object Model). Každý tag se stane uzlem stromu s rodičem, dětmi a sourozenci.

Jakmile prohlížeč narazí na tag <link> odkazující na CSS soubor, stáhne ho okamžitě – bez CSS by stránka vypadala jako holý text. Narazí-li na <script> v <head>, stáhne JavaScript a počká, až se spustí, než pokračuje v parsování. Proto se skripty umísťují na konec <body> – stránka se pak zobrazí rychleji.

Krok 5 – CSS a vykreslení stránky

Po parsování HTML prohlížeč zpracuje CSS a pro každý uzel DOM spočítá výsledný styl (tzv. computed style). Vznikne CSSOM (CSS Object Model).

DOM a CSSOM se spojí do render tree – stromu všech viditelných prvků s jejich styly. Prvky skryté přes display: none do render tree nevstoupí.

Poté prohlížeč spočítá pozici a rozměry každého prvku (layout) a nakreslí stránku na obrazovku (paint). Teprve nyní vidíš výsledek.

Cache – proč se někdy nezobrazuje nový obsah

Prohlížeč si ukládá stažené soubory do cache – lokálního úložiště na tvém počítači. Příště, když navštívíš stejnou stránku, použije uloženou kopii místo stahování ze serveru znovu. Web se načte rychleji.

Nevýhoda: pokud nahraješ na server opravenou verzi CSS nebo JavaScriptu, prohlížeč může stále zobrazovat starou verzi z cache. Řešení:

  • Tvrdé obnovení stránky: Cmd + Shift + R (Mac) nebo Ctrl + Shift + R (Windows).
  • Ve vývojářském režimu: DevTools → Network → zaškrtnout „Disable cache\".
  • Verzování souborů: styl.css?v=2 – pro server je to jiná adresa, takže stáhne čerstvý soubor.

Tip od Zdeňka

Zdeněk radí: Záložka Network v DevTools je nástroj, který používám téměř při každém ladění. Vidíš tam každý soubor, který prohlížeč stahuje – HTML, CSS, JavaScript, obrázky – a ke každému stavový kód. Když se soubor nenačte, okamžitě uvidíš červenou 404 a přesný název souboru, který chybí. Ušetří ti to hodiny hledání. A naučit se číst stavové kódy je investice, která se vrátí hned při první chybě.