Sobes.tech
Middle

Hogyan történik a weboldal renderelése a felhasználó számára?

sobes.tech MI

Válasz az MI-től

  1. A felhasználó beírja az URL-t a böngészőbe. A böngésző DNS-kérést küld a szerver IP-címének megszerzéséhez.
  2. A böngésző TCP-kapcsolatot létesít a szerverrel. Általában az HTTP/S protokollt használják.
  3. A böngésző HTTP-kérést küld a szervernek. A HTML-dokumentum és más erőforrások (CSS, JavaScript, képek) kérésre kerülnek.
  4. A szerver feldolgozza a kérést és HTTP-választ küld. A válasz tartalmazza a kért erőforrásokat és a státuszinformációkat.
  5. A böngésző megkapja a HTML-dokumentumot. Elkezdődik a HTML elemzése.
  6. Létrejön a DOM (Document Object Model). Egy objektumfa, amely a HTML szerkezetét reprezentálja.
  7. A böngésző felismeri a HTML-ben a külső erőforrásokra (CSS, JavaScript, képek) mutató hivatkozásokat. További kérések történnek azok beszerzése érdekében.
  8. A böngésző megkapja a CSS-stílusokat. Elkezdődik a CSS elemzése.
  9. Létrejön a CSSOM (CSS Object Model). Egy objektumfa, amely a stílusokat reprezentálja.
  10. Létrejön a Render Tree. A DOM és a CSSOM egyesítése. Csak a látható elemek és azok stílusai tartoznak ide.
  11. Layout (vagy Reflow). Minden elem geometriai méretei és pozíciója kiszámításra kerül.
  12. Paint (vagy Repaint). Az elemek a stílusuknak és pozíciójuknak megfelelően kerülnek kirajzolásra a képernyőre.
  13. Összeállítás. A oldal rétegenként kerül összerakásra a felhasználó számára való megjelenítéshez.
  14. A böngésző megkapja a JavaScript-fájlokat. Elkezdődik a kód elemzése és végrehajtása. A JavaScript módosíthatja a DOM-ot és a CSSOM-ot, ami a Layout és a Paint újraszámítását eredményezi.
  15. Az oldal megjelenik a felhasználónak. Ahogy a források érkeznek és a lépések befejeződnek, a felhasználó látja az oldal tartalmát.