Middle
Jak probíhá vykreslení webové stránky pro uživatele?
sobes.tech AI
Odpověď od AI
- Uživatel zadá URL do prohlížeče. Prohlížeč odešle DNS požadavek pro získání IP adresy serveru.
- Prohlížeč naváže TCP spojení se serverem. Obvykle se používá protokol HTTP/S.
- Prohlížeč odešle HTTP požadavek na server. Požadován je HTML dokument a další zdroje (CSS, JavaScript, obrázky).
- Server zpracuje požadavek a odešle HTTP odpověď. Odpověď obsahuje požadované zdroje a informace o stavu.
- Prohlížeč obdrží HTML dokument. Začíná parsování HTML.
- Vytvoří se DOM (Document Object Model). Strom objektů reprezentující strukturu HTML.
- Prohlížeč detekuje v HTML odkazy na externí zdroje (CSS, JavaScript, obrázky). Provádí se další požadavky pro jejich získání.
- Prohlížeč obdrží CSS styly. Začíná parsování CSS.
- Vytvoří se CSSOM (CSS Object Model). Strom objektů reprezentujících styly.
- Vytvoří se Render Tree. Spojení DOM a CSSOM. Obsahuje pouze viditelné prvky a jejich styly.
- Layout (nebo Reflow). Vypočítají se geometrické rozměry a pozice každého prvku na stránce.
- Paint (nebo Repaint). Prvky jsou vykresleny na obrazovku podle jejich stylů a pozic.
- Složení. Stránka je složena vrstvu po vrstvě pro zobrazení uživateli.
- Prohlížeč obdrží soubory JavaScript. Začíná parsování a vykonávání kódu. JavaScript může měnit DOM a CSSOM, což vede k přepočtu Layout a Paint.
- Zobrazení stránky uživateli. Jakmile jsou zdroje přijaty a kroky dokončeny, uživatel vidí obsah stránky.