Sobes.tech
Nápověda k rozhovoru
Zdroje
Příprava na pohovor
Zdroje
Hledání práce
Zdroje
Právní
Zpět k otázkám
Middle

Jak se načítá webová stránka?

sobes.tech AI

Odpověď od AI

  1. Uživatel zadá URL do adresního řádku prohlížeče nebo klikne na odkaz.
  2. Parsování URL: Prohlížeč analyzuje URL za účelem určení protokolu, domény, portu a cesty.
  3. Hledání IP adresy: Prohlížeč kontroluje cache DNS, poté cache operačního systému, a nakonec cache routeru. Pokud adresa není nalezena lokálně, odešle požadavek na DNS server k získání IP adresy doménového jména.
  4. Navázání TCP spojení (Handshake): Prohlížeč naváže TCP spojení se serverem podle získané IP adresy (třífázové handshake: SYN -> SYN-ACK -> ACK).
  5. Odeslání HTTP požadavku: Prohlížeč odešle HTTP požadavek (obvykle GET) na server s uvedením požadovaného zdroje (cesta), hlaviček (User-Agent, Accept-Encoding, Cookie atd.) a těla požadavku (pokud je).
    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
  6. Zpracování požadavku serverem: Server obdrží požadavek, zpracuje jej (například spouští skripty na straně serveru) a vytvoří HTTP odpověď.
  7. Odeslání HTTP odpovědi: Server odešle HTTP odpověď zpět prohlížeči. Odpověď obsahuje statusový kód (například 200 OK), hlavičky (Content-Type, Content-Length, Cache-Control atd.) a tělo odpovědi (obsah požadovaného zdroje, například HTML soubor).
    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>
  8. Analýza HTML a konstrukce DOM: Prohlížeč obdrží HTML kód a analyzuje jej, vytváří objektový model dokumentu (DOM - Document Object Model) v paměti. DOM představuje strom elementů HTML.
  9. Načítání a zpracování zdrojů: Při analýze HTML narazí prohlížeč na odkazy na jiné zdroje (CSS, JavaScript, obrázky, písma atd.). Pro každý zdroj se provádí kroky 3-7 (hledání IP, TCP spojení, HTTP požadavek/odpověď). Načítání těchto zdrojů může probíhat paralelně (omezeno počtem současných spojení).
  10. Vytváření CSSOM: Prohlížeč analyzuje CSS soubory a bloky <style> v HTML, vytváří objektový model CSS (CSSOM - CSS Object Model). CSSOM představuje styly aplikované na prvky stránky.
  11. Vytváření Render Tree: Prohlížeč kombinuje DOM a CSSOM pro vytvoření renderovacího stromu (Render Tree). Render Tree obsahuje pouze viditelné prvky a jejich styly. Prvky s display: none nejsou zahrnuty.
  12. Rozložení (Reflow): Prohlížeč vypočítá přesné umístění a rozměry každého prvku na stránce na základě Render Tree, velikosti okna a stylů.
  13. Kreslení (Repaint): Prohlížeč vykreslí každý prvek na obrazovku na vypočítaných pozicích a s použitými styly. To se děje na vrstvách.
  14. Seskupení: Prohlížeč spojí nakreslené vrstvy do konečného obrázku, který se zobrazí na obrazovce uživatele.
  15. Spuštění JavaScriptu: Během načítání a analýzy skriptů se spouští kód JavaScript. Spuštění JavaScriptu může ovlivnit DOM a CSSOM, což způsobí opětovné kroky Layout a Painting (Reflow/Repaint).

Klíčové fáze zobrazování obsahu:

  • DOMContentLoaded: Událost se spustí, když prohlížeč úplně načetl a analyzoval HTML dokument a vytvořil DOM strom, ale čeká na načtení stylových tabulek, obrázků a podřízených rámců.
  • Load: Událost se spustí, když je celá stránka, včetně obrázků, skriptů, stylů a dalších zdrojů, plně načtena.
PředchozíDalší