Jak prohlížeč parsuje HTML a vytváří stránku (kritická cesta vykreslování)?

Question

Accepted Answer

**Kritická cesta vykreslování** je posloupnost kroků, které prohlížeč provede, aby transformoval HTML, CSS a JS na pixely. Pochopení této cesty vysvětluje, co blokuje vykreslování a jak urychlit vykreslení stránek. ## Jednotlivé kroky ```text 1. Parse HTML → DOM tree (the document structure) 2. Parse CSS → CSSOM tree (the style rules) 3. DOM + CSSOM → Render tree (visible nodes + their styles) 4. Layout (reflow) → compute each node's geometry (position/size) 5. Paint → fill in pixels (colors, text, images) 6. Composite → combine layers onto the screen ``` ## Co blokuje vykreslování **CSS blokuje vykreslování.** Prohlížeč nevykresli nic, dokud není připraven CSSOM (aby se zabránilo bliknutí obsahem bez stylů). Proto velké nebo pomalé CSS zpožďuje první vykreslení — udržujte kritické CSS malé a pokud je to možné, vkládejte ho přímo. **Synchronní skripty blokují parser.** Běžný ` ``` Hůře je to, když synchronní skript potřebuje CSSOM (např. čte vypočítané styly) a čeká na CSS — takže CSS soubor může nepřímo blokovat skript, který blokuje parser. ## Jak to optimalizovat - Umístěte CSS do `` (načtěte ho brzy); vkládejte kritické CSS přímo. - Přidejte `defer` (nebo `type="module"`) ke skriptům, nebo je umístěte před ``. - Minifikujte a komprimujte CSS/JS; odeberte nepoužívané pravidla. - Použijte `preload` pro kritické fonty/assets, `preconnect` pro klíčové originy. - Vyhnete se layout thrashingu (opakovanému čtení/zápisu layoutu v JS) — vynucuje to dodatečné reflow. ## Proč je to důležité Kritická cesta vykreslování určuje metriky jako First Contentful Paint a Largest Contentful Paint. Vědomí, že CSS blokuje vykreslování a synchronní JS blokuje parsování, vám přesně vysvětlí, proč `defer`/`async`, vkládané kritické CSS a resource hints urychlují stránku — zkracují nebo odblokují tuto cestu.