Sobes.tech
Pomoc s pohovorom
Zdroje
Príprava na pohovor
Zdroje
Hľadanie práce
Zdroje
Právne
Späť k otázkam
Middle

Ako sa načíta webová stránka?

sobes.tech AI

Odpoveď od AI

  1. Používateľ zadá URL do adresného riadku prehliadača alebo klikne na odkaz.
  2. Parsovanie URL: Prehliadač analyzuje URL na určenie protokolu, domény, portu a cesty.
  3. Hľadanie IP adresy: Prehliadač kontroluje cache DNS, potom cache operačného systému a nakoniec cache smerovača. Ak adresa nie je nájdená lokálne, odošle požiadavku na DNS server na získanie IP adresy doménového mena.
  4. Vytvorenie TCP spojenia (Handshake): Prehliadač vytvára TCP spojenie so serverom na základe získanej IP adresy (trojstranné handshake: SYN -> SYN-ACK -> ACK).
  5. Odoslanie HTTP požiadavky: Prehliadač odosiela HTTP požiadavku (zvyčajne GET) na server s uvedením požadovaného zdroja (cesta), hlavičkami (User-Agent, Accept-Encoding, Cookie atď.) a telom požiadavky (ak 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. Spracovanie požiadavky serverom: Server prijíma požiadavku, spracováva ju (napríklad spúšťa skripty na strane servera) a vytvára HTTP odpoveď.
  7. Odoslanie HTTP odpovede: Server odosiela HTTP odpoveď späť prehliadaču. Odpoveď obsahuje stavový kód (napríklad 200 OK), hlavičky (Content-Type, Content-Length, Cache-Control atď.) a telo odpovede (obsah požadovaného zdroja, napr. HTML súbor).
    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. Parsovanie HTML a konštrukcia DOM: Prehliadač prijíma HTML kód a analyzuje ho, vytvára objektový model dokumentu (DOM - Document Object Model) v pamäti. DOM predstavuje strom prvkov HTML.
  9. Načítanie a spracovanie zdrojov: Počas parsovania HTML prehliadač narazí na odkazy na iné zdroje (CSS, JavaScript, obrázky, písma atď.). Pre každý zdroj sa vykonajú kroky 3-7 (hľadanie IP, TCP spojenie, HTTP požiadavka/odpoveď). Načítanie týchto zdrojov môže prebiehať paralelne (obmedzené počtom súčasných spojení).
  10. Vytváranie CSSOM: Prehliadač analyzuje CSS súbory a bloky <style> v HTML, vytvára objektový model CSS (CSSOM - CSS Object Model). CSSOM predstavuje štýly aplikované na prvky stránky.
  11. Vytváranie Render Tree: Prehliadač kombinuje DOM a CSSOM na vytvorenie stromu vykreslenia (Render Tree). Render Tree obsahuje iba viditeľné prvky a ich štýly. Prvky s display: none nie sú zahrnuté.
  12. Rozloženie (Reflow): Prehliadač vypočíta presné umiestnenie a rozmery každého prvku na stránke na základe Render Tree, veľkosti okna a štýlov.
  13. Kreslenie (Repaint): Prehliadač nakreslí každý prvok na obrazovku na vypočítaných pozíciách a s použitými štýlmi. Toto sa deje na vrstvách.
  14. Kombinovanie: Prehliadač spojí nakreslené vrstvy do konečného obrázka, ktorý sa zobrazí na obrazovke používateľa.
  15. Vykonanie JavaScriptu: Počas načítania a analýzy skriptov sa spúšťa kód JavaScript. Vykonanie JavaScriptu môže ovplyvniť DOM a CSSOM, čo spôsobí opätovné kroky Layout a Painting (Reflow/Repaint).

Kľúčové fázy zobrazovania obsahu:

  • DOMContentLoaded: Udalosť sa aktivuje, keď prehliadač úplne načítal a analyzoval HTML dokument a vytvoril DOM strom, ale čaká na načítanie štýlových tabuliek, obrázkov a podriadených rámcov.
  • Load: Udalosť sa aktivuje, keď je celá stránka, vrátane obrázkov, skriptov, štýlov a ďalších zdrojov, úplne načítaná.
PredchádzajúceĎalej