Být webovým vývojářem je asi jako být mágem. Vytváříte krásné a interaktivní webové stránky a zdá se, že s vašimi fantastickými dovednostmi je uživatelé vidí dokonale. Ale jak prohlížeč shromažďuje, dešifruje a převádí HTML,CSS a JavaScript na příjemný obsah webu? Zde přichází na řadu proces kreslení stránky v prohlížeči.
Stručně řečeno, proces načrtnutí stránky zahrnuje různé fáze, kterými prohlížeč prochází, aby uživateli ukázal požadovanou stránku. Tyto fáze zahrnují parsing HTML, stavbu DOM a CSSOM, výpočet a aplikaci stylů, výpočty a Vykreslování rozvržení a nakonec Vykreslování pixelů na obrazovce.
Proces začíná parsingem HTML kódu, který prohlížeč přijímá z webového serveru. V procesu parsingu je postaven DOM (Document Object Model) - hierarchické znázornění prvků stránky. Poté je vytvořen CSSOM (CSS Object Model) - struktura, která určuje stylizaci prvků. Po sestavení DOM a CSSOM prohlížeč vypočítá styly pro každou položku, spustí JavaScript a vytvoří rozvržení určující umístění prvků na stránce.
Při provádění těchto kroků prohlížeč postupně zobrazuje obsah stránky, pixel po pixelu. Tento proces zahrnuje výpočty a optimalizace, aby bylo zajištěno plynulé a efektivní Vykreslování. Nakonec, když jsou všechny fáze dokončeny, prohlížeč přenese načrtnutou stránku na obrazovku a uživatel uvidí výsledek svého dotazu.
Interpretace HTML a CSS
Prohlížeče hrají obtížnou roli při čtení a interpretaci HTML a CSS kódu, aby zobrazily webovou stránku pro uživatele. Když uživatel zadá adresu URL do adresního řádku prohlížeče, odešle požadavek na server, aby získal dokument HTML obsahující informace o stránce.
Po obdržení dokumentu HTML prohlížeč zahájí jeho interpretaci. Prohlížeč rozdělí HTML kód na bloky, jako jsou záhlaví, odstavce nebo seznamy, pomocí různých HTML tagů. Prohlížeč poté převede prvky HTML do interní datové struktury zvané DOM (Document Object Model).
Mezitím CSS určuje styl a vzhled prvků HTML. Prohlížeč zpracovává CSS kód a vytváří CSSOM (CSS Object Model), který ukazuje, jaké styly použít na různé položky na stránce.
Jakmile prohlížeč dokončí stavbu DOM a CSSOM, spojí je dohromady a vytvoří Render Tree (strom zobrazení). Render Tree obsahuje informace o tom, které prvky je třeba zobrazit a jejich relativní umístění na stránce.
A konečně, na základě render Tree, prohlížeč zahajuje proces vykreslování stránky, který se nazývá Vykreslování. Prohlížeč začíná vykreslovat každý prvek,od horní úrovně stromu ke spodní. Prohlížeč aplikuje styly na každý prvek, určuje jeho velikost a pozici a nakonec kreslí prvky na obrazovku.
Celý tento proces probíhá velmi rychle, obvykle ve zlomcích sekundy, a prohlížeč neustále sleduje změny a v případě potřeby aktualizuje zobrazení stránky. Právě díky tomuto procesu vidíme webové stránky s tak rozmanitými prvky a styly.
Parsing DOM-dřevo a konstrukce CSSOM-dřevo
Parsing HTML kódu začíná lexikální analýzou, která vede k rozdělení kódu na lexémy nebo tokeny. Poté dojde k syntaktické analýze, během které jsou lexémy seskupeny do správných struktur jazyka. V tomto okamžiku je vytvořen strom, který odráží hierarchickou strukturu HTML kódu.
DOM-dřevo je základem pro konstrukci CSSOM-dřeva (dřeva objektů modelu CSS). CSSOM-strom obsahuje informace o stylech, které se vztahují na prvky Dom dřeva. Pro vytvoření stromu CSSOM zpracovává prohlížeč kaskádovou tabulku stylů (soubory CSS, vnitřní styly a styly definované atributem "style" prvků). V důsledku konstrukce stromu CSSOM je každému prvku stromu DOM přiřazena sada stylů, které se na něj použijí při kreslení.
Dom-strom a CSSOM-strom se spojují do renderového stromu, což je souhrnná struktura používaná prohlížečem k zobrazení webové stránky. Render strom obsahuje pouze prvky a styly, které mohou ovlivnit zobrazení stránky (např. blokové a řetězcové prvky, polohovací prvky, textové prvky atd.).
Parsing Dom-dřevo a konstrukce stromu CSSOM jsou důležitými kroky v procesu kreslení webové stránky prohlížečem. Přesné pochopení těchto kroků pomáhá vývojářům optimalizovat kód a vytvářet efektivní a produktivní webové aplikace.
Tvarování renderového dřeva a výpočty stylů
Chcete-li vytvořit renderový strom, prohlížeč prochází Dom stromem a přeskakuje prvky, které se na stránce nezobrazí, jako jsou skryté prvky nebo prvky uvnitř komentářů. Zbývající prvky jsou převedeny do uzlů renderového dřeva, které se budou podílet na následném výpočtu stylů a Vykreslování.
Po vytvoření renderového stromu se prohlížeč pustí do výpočtu stylů. Styly lze definovat uvnitř kódu HTML pomocí atributů prvků, uvnitř značek