Ako spracováva prehliadač webovú stránku?

Proces spracovania webovej stránky prehliadačom možno rozdeliť na niekoľko etáp:

1. Žiadosť a získanie zdroja:

   • Používateľ zadá URL do adresného riadku alebo klikne na odkaz.
   • Prehliadač odošle HTTP žiadosť na server.
   • Server spracuje žiadosť a odošle odpoveď, ktorá zvyčajne obsahuje HTML dokument.

2. Syntaktická analýza (Parsing):

   • Prehliadač obdrží HTML dokument vo forme bajtov.
   • Tieto bajty sú dekódované podľa uvedenej kódovacej schémy na znaky.
   • HTML parser analyzuje dokument po znakoch a vytvára strom DOM (Document Object Model). DOM predstavuje logickú štruktúru dokumentu.
   • Pri nájdení tagov <link> (pre CSS) alebo <script> (pre JavaScript) začína prehliadač sťahovať tieto zdroje paralelne s analýzou HTML.

3. Vytváranie CSSOM:

   • CSS parser analyzuje CSS pravidlá z <style> tagov, <link> tagov a inline štýlov.
   • Na základe týchto pravidiel sa vytvára strom CSSOM (CSS Object Model), ktorý obsahuje všetky štýly pre každý prvok na stránke.

4. Vytváranie renderovacieho stromu (Render Tree):

   • Render Tree kombinuje DOM a CSSOM. Obsahuje iba prvky, ktoré budú zobrazené na stránke, a ich štýly.
   • Prvky s CSS pravidlom display: none; sa nezahrňujú do Render Tree.

5. Rozloženie (Layout / Reflow):

   • Prehliadač vypočíta presné geometrické rozmery a pozíciu každého prvku na základe Render Tree. Tento proces sa nazýva Layout alebo Reflow.
   • Layout sa vykonáva pri prvom vytvorení Render Tree, ako aj pri zmene veľkosti okna, pridávaní alebo odstraňovaní prvkov či zmene ich štýlov.

6. Kreslenie (Painting / Repaint):

   • Prehliadač vykreslí každý prvok na obrazovku pomocou informácií z Render Tree a výsledkov kroku Layout.
   • Kreslenie môže tiež nastať pri zmene viditeľných vlastností prvku, ako je farba, pozadie, priehľadnosť, bez zmeny jeho geometrie (toto sa nazýva Repaint).

7. Kompózovanie:

   • Kreslené prvky môžu byť zlúčené na rôznych vrstvách pre optimalizáciu vykresľovania a animácií.
   • Tieto vrstvy sa potom zlúčia na zobrazenie konečnej stránky na obrazovke.

8. Vykonávanie skriptov:

   • Keď HTML parser dosiahne tag <script>, analýza HTML sa pozastaví (zvyčajne) a prehliadač stiahne, analyzuje a vykoná JavaScript kód.
   • JavaScript môže meniť DOM a CSSOM, čo môže spôsobiť opätovné kroky Layout a Painting.
   • Atribúty async a defer pre tag <script> ovplyvňujú poradie a čas vykonania skriptov, umožňujúc pokračovať v analýze HTML.

Tu je približná vizualizácia toku:

HTTP požiadavka
↓
HTML bajty
↓
HTML parser
→ CSS parser (paralelne)
    ↓           ↓
    DOM strom  CSSOM strom
          ↓
     Render strom
          ↓
        Layout
          ↓
       Kreslenie
          ↓
     Kompozícia
          ↓
   Obrazovka

Vykonávanie JavaScriptu môže byť prerušené na rôznych etapách, spôsobujúc opätovné kroky:

HTML parser + `<script>` tag
↓
Pauza HTML analýzy
↓
Stiahnutie skriptu
↓
Analýza skriptu
↓
Vykonanie skriptu
↓
(Možné modifikácie DOM/CSSOM → Spustenie Layout/Repaint)
↓
Pokračovanie HTML analýzy

Porozumenie tohto procesu je dôležité pre optimalizáciu výkonu webových stránok.