Middle
Ako prebieha vykresľovanie stránky pre používateľa?
sobes.tech AI
Odpoveď od AI
- Používateľ zadá URL do prehliadača. Prehliadač odošle DNS požiadavku na získanie IP adresy servera.
- Prehliadač nadviaže TCP spoj so serverom. Zvyčajne sa používa protokol HTTP/S.
- Prehliadač odošle HTTP požiadavku na server. Požadujú sa HTML dokument a ďalšie zdroje (CSS, JavaScript, obrázky).
- Server spracuje požiadavku a odošle HTTP odpoveď. Odpoveď obsahuje požadované zdroje a informácie o stave.
- Prehliadač prijme HTML dokument. Začína sa parsovanie HTML.
- Vytvorí sa DOM (Document Object Model). Strom objektov, ktorý reprezentuje štruktúru HTML.
- Prehliadač zistí v HTML odkazy na externé zdroje (CSS, JavaScript, obrázky). Vykonajú sa ďalšie požiadavky na ich získanie.
- Prehliadač prijme CSS štýly. Začína sa parsovanie CSS.
- Vytvorí sa CSSOM (CSS Object Model). Strom objektov, ktorý reprezentuje štýly.
- Vytvorí sa Render Tree. Zlúčenie DOM a CSSOM. Obsahuje iba viditeľné prvky a ich štýly.
- Layout (alebo Reflow). Vypočítajú sa geometrické rozmery a pozícia každého prvku na stránke.
- Paint (alebo Repaint). Prvky sú vykreslené na obrazovku podľa ich štýlov a pozície.
- Kompozícia. Stránka je skladaná vrstvu po vrstve na zobrazenie používateľovi.
- Prehliadač prijíma súbory JavaScript. Začína sa parsovanie a vykonávanie kódu. JavaScript môže meniť DOM a CSSOM, čo vedie k prepočtu Layout a Paint.
- Zobrazenie stránky používateľovi. Ako sa zdroje prijímajú a kroky dokončia, používateľ vidí obsah stránky.