Middle
Co je to kritická cesta vykreslování webových stránek?
sobes.tech AI
Odpověď od AI
Kritická cesta vykreslování (Critical Rendering Path - CRP) je sekvence kroků, které prohlížeč provádí, aby převedl HTML, CSS a JavaScript na pixely zobrazitelné na obrazovce. Optimalizace CRP umožňuje urychlit vykreslování obsahu a zlepšit dobu do interaktivity stránky.
Hlavní fáze CRP:
- Vytvoření DOM (Document Object Model): Prohlížeč analyzuje HTML kód a vytváří stromovou strukturu reprezentující obsah stránky.
- Vytvoření CSSOM (CSS Object Model): Prohlížeč analyzuje CSS pravidla (z
<style>tagů nebo externích CSS souborů) a vytváří stromovou strukturu reprezentující styly pro každý prvek DOM. CSS je blokující zdroj pro vykreslování, protože bez informací o stylech nemůže prohlížeč vytvořit renderovací strom. - Vytvoření renderovacího stromu (Render Tree): Spojení DOM (pouze viditelné uzly) a CSSOM. Tento strom obsahuje všechny viditelné prvky na stránce a jejich styly připravené k vykreslení.
- Rozložení (Layout): Prohlížeč vypočítá přesné umístění a rozměry každého prvku na stránce.
- Vykreslení (Paint): Prohlížeč převede každý prvek renderovacího stromu na skutečné pixely na obrazovce.
- Seskupení (Composite): Prohlížeč spojí vykreslené vrstvy do finálního obrázku.
Zdroje, které blokují vykreslování (například CSS a synchronní JavaScript v hlavičce <head>), zvyšují dobu sestavení CRP. Optimalizace CRP zahrnuje minimalizaci nebo asynchronní načítání blokujících zdrojů a priorizaci načítání kritického obsahu (nad "záhybem" stránky).