Hogyan töltődik be egy weboldal?

A felhasználó beírja az URL-t a böngésző címsorába vagy rákattint egy linkre.
URL elemzése: A böngésző elemzi az URL-t, hogy meghatározza a protokollt, a domaint, a portot és az útvonalat.
IP-cím keresése: A böngésző ellenőrzi a DNS gyorsítótárat, majd az operációs rendszer gyorsítótárát, végül a router gyorsítótárát. Ha a cím nem található helyben, DNS-kiszolgálónak küld kérdést a domain név IP-címének megszerzéséhez.
TCP kapcsolat létesítése (Handshake): A böngésző TCP kapcsolatot létesít a szerverrel a kapott IP-címmel (háromlépcsős kézfogás: SYN -> SYN-ACK -> ACK).
HTTP kérés küldése: A böngésző HTTP kérést küld (általában GET) a szervernek a kért erőforrás (útvonal), a fejléc (User-Agent, Accept-Encoding, Cookie stb.) és a kérés törzse (ha van) megadásával.
```
GET /index.html HTTP/1.1  
Host: example.com  
User-Agent: Mozilla/5.0 ...  
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8  
```
A kérés feldolgozása a szerveren: A szerver megkapja a kérést, feldolgozza (pl. szerveroldali szkripteket futtat), és HTTP választ generál.
HTTP válasz küldése: A szerver visszaküldi a HTTP választ a böngészőnek. A válasz tartalmazza az állapotkódot (pl. 200 OK), a fejlécet (Content-Type, Content-Length, Cache-Control stb.) és a válasz törzsét (a kért erőforrás tartalmát, pl. HTML fájlt).
```
HTTP/1.1 200 OK  
Content-Type: text/html; charset=UTF-8  
Content-Length: 12345  
Cache-Control: max-age=3600  

<!DOCTYPE html>  
<html>  
<head>...</head>  
<body>...</body>  
</html>  
```
HTML elemzése és DOM felépítése: A böngésző megkapja az HTML kódot, elemzi, és létrehozza a dokumentum objektum modelljét (DOM - Document Object Model) a memóriában. A DOM az HTML elemek fáját reprezentálja.
Erőforrások betöltése és feldolgozása: Az HTML elemzése során a böngésző más erőforrásokra (CSS, JavaScript, képek, betűtípusok stb.) mutató hivatkozásokkal találkozik. Minden erőforrás esetében a lépések 3-7 ismétlődnek (IP keresés, TCP kapcsolat, HTTP kérés/válasz). Ezek betöltése párhuzamosan történhet (a párhuzamos kapcsolatok számával korlátozva).
CSSOM felépítése: A böngésző elemzi a CSS fájlokat és a HTML-ben lévő <style> blokkokat, létrehozva a CSS objektum modellt (CSSOM - CSS Object Model). A CSSOM reprezentálja az oldalra alkalmazott stílusokat.
Render Tree felépítése: A böngésző összekapcsolja a DOM-ot és a CSSOM-ot, hogy létrehozza a render fáját (Render Tree). A Render Tree csak a látható elemeket és azok stílusait tartalmazza. A display: none-al ellátott elemek nem kerülnek be.
Elrendezés (Reflow): A böngésző kiszámítja minden elem pontos helyét és méretét az oldalban, a Render Tree, az ablak mérete és a stílusok alapján.
Festés (Repaint): A böngésző minden elemet megrajzol a képernyőn a kiszámított pozíciókban és a alkalmazott stílusokkal. Ez rétegekben történik.
Összeállítás: A böngésző összefűzi a megrajzolt rétegeket egy végső képet, amely a felhasználó képernyőjén jelenik meg.
JavaScript végrehajtása: A szkriptek betöltése és elemzése közben a JavaScript kód végrehajtódik. A JavaScript végrehajtása befolyásolhatja a DOM-ot és a CSSOM-ot, újraindítva a Layout és a Festés lépéseket (Reflow/Repaint).

A tartalom megjelenítésének fő lépései:

DOMContentLoaded: Az esemény akkor aktiválódik, amikor a böngésző teljesen betöltötte és elemzte a HTML dokumentumot, és felépítette a DOM-ot, de vár a stíluslapok, képek és al-keretek betöltésére.
Load: Az esemény akkor aktiválódik, amikor az egész oldal, beleértve a képeket, szkripteket, stílusokat és más erőforrásokat, teljesen betöltődött.