Jak prohlížeč zpracovává webovou stránku?

Proces zpracování webové stránky prohlížečem lze rozdělit do několika fází:

1. Požadavek a získání zdroje:

   • Uživatel zadá URL do adresního řádku nebo klikne na odkaz.
   • Prohlížeč odešle HTTP požadavek na server.
   • Server požadavek zpracuje a odešle odpověď, obvykle obsahující HTML dokument.

2. Syntaktická analýza (Parsing):

   • Prohlížeč obdrží HTML dokument ve formě bajtů.
   • Tyto bajty jsou dekódovány podle uvedeného kódování na znaky.
   • HTML parser analyzuje dokument po znacích a vytváří strom DOM (Document Object Model). DOM představuje logickou strukturu dokumentu.
   • Při nalezení tagů <link> (pro CSS) nebo <script> (pro JavaScript) začíná prohlížeč stahovat tyto zdroje paralelně s analýzou HTML.

3. Vytváření CSSOM:

   • CSS parser analyzuje CSS pravidla z <style> tagů, <link> tagů a inline stylů.
   • Na základě těchto pravidel se vytváří strom CSSOM (CSS Object Model), který obsahuje všechny styly pro každý prvek na stránce.

4. Vytváření renderovacího stromu (Render Tree):

   • Render Tree kombinuje DOM a CSSOM. Obsahuje pouze prvky, které budou zobrazeny na stránce, a jejich styly.
   • Prvky s CSS pravidlem display: none; nejsou do Render Tree zahrnuty.

5. Rozložení (Layout / Reflow):

   • Prohlížeč vypočítá přesné geometrické rozměry a pozici každého prvku na základě Render Tree. Tento proces se nazývá Layout nebo Reflow.
   • Layout probíhá při prvním sestavení Render Tree, stejně jako při změně velikosti okna, přidání nebo odstranění prvků či změně jejich stylů.

6. Kreslení (Painting / Repaint):

   • Prohlížeč vykreslí každý prvek na obrazovku podle informací z Render Tree a výsledků kroku Layout.
   • Kreslení může také nastat při změně viditelných vlastností prvku, jako je barva, pozadí, průhlednost, aniž by došlo ke změně geometrie (toto se nazývá Repaint).

7. Kompizice:

   • Kreslené prvky mohou být sloučeny na různých vrstvách pro optimalizaci vykreslování a animací.
   • Tyto vrstvy jsou pak sloučeny pro zobrazení konečné stránky na obrazovce.

8. Vykonávání skriptů:

   • Když HTML parser dosáhne tagu <script>, analýza HTML se pozastaví (obvykle) a prohlížeč stáhne, analyzuje a vykoná JavaScriptový kód.
   • JavaScript může měnit DOM a CSSOM, což může vyvolat opětovné kroky Layout a Painting.
   • Atributy async a defer u tagu <script> ovlivňují pořadí a čas vykonání skriptů, umožňují pokračovat v analýze HTML.

Zde je přibližná vizualizace toku:

HTTP požadavek
↓
HTML bajty
↓
HTML parser
→ CSS parser (paralelně)
    ↓           ↓
    DOM strom  CSSOM strom
          ↓
     Render strom
          ↓
        Layout
          ↓
       Kreslení
          ↓
     Kompozice
          ↓
   Zobrazení na obrazovce

Vykonávání JavaScriptu může zasahovat do různých fází a způsobit opětovné kroky:

HTML parser + `<script>` tag
↓
Pozastavení HTML parsování
↓
Stažení skriptu
↓
Analýza skriptu
↓
Vykonání skriptu
↓
(Možná změna DOM/CSSOM → Vyvolání Layout/Repaint)
↓
Pokračování HTML parsování

Porozumění tomuto procesu je důležité pro optimalizaci výkonu webových stránek.