Sobes.tech
Middle

Wat gebeurt er als je bijvoorbeeld google.com in de browser invoert?

sobes.tech AI

Antwoord van AI

  1. URL-analyse: De browser splitst de URL in de samenstellende delen: het protocol (HTTP/HTTPS), de domeinnaam (google.com) en het pad (/).

  2. Zoeken naar IP-adres:

    • De browser controleert zijn DNS-cache.
    • Het besturingssysteem controleert zijn DNS-cache.
    • Het systeem vraagt de DNS-server (meestal geleverd door de provider).
    • De DNS-server voert recursieve verzoeken uit aan de root-, TLD- en autoritatieve DNS-servers totdat het IP-adres van google.com gevonden is.
    • Het IP-adres wordt teruggegeven aan de browser.
  3. Opzetten van TCP-verbinding:

    • De browser stelt een TCP-verbinding in met de server via het gevonden IP-adres, gebruikmakend van de three-way handshake (SYN, SYN-ACK, ACK).
  4. SSL/TLS-handshake (voor HTTPS):

    • De client en server onderhandelen over encryptie-algoritmen.
    • De server stuurt zijn certificaat.
    • De browser verifieert het certificaat.
    • Partijen wisselen encryptiesleutels uit voor een beveiligde verbinding.
  5. Verzenden van HTTP-verzoek: De browser stuurt een HTTP-verzoek naar de server, met daarin de methode (GET), het pad, headers (Host, User-Agent, Accept, enz.) en mogelijk de body van het verzoek.

    GET / HTTP/1.1  
    Host: google.com  
    User-Agent: Mozilla/5.0 (...)  
    Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8  
    
  6. Verwerking van het verzoek door de server:

    • De server ontvangt het verzoek.
    • De server verwerkt het verzoek (bijvoorbeeld, voert de applicatielogica uit).
    • De server genereert het HTTP-antwoord.
  7. Ontvangst van het HTTP-antwoord: De browser ontvangt het HTTP-antwoord van de server, met daarin de statuscode (bijvoorbeeld 200 OK), headers (Content-Type, Content-Length, enz.) en de body van het antwoord (HTML-pagina, afbeeldingen, CSS, JS, enz.).

    HTTP/1.1 200 OK  
    Content-Type: text/html; charset=UTF-8  
    Content-Length: XXXX  
    ...  
    
    <!doctype html>...  
    
  8. Rendering van de pagina:

    • De browser begint de HTML-code te parsen.
    • Bij het detecteren van links naar CSS, JavaScript of afbeeldingen, doet de browser extra verzoeken om deze op te halen (stappen 2-7 worden herhaald voor elke resource).
    • De browser bouwt de DOM-boom (Document Object Model) uit de HTML.
    • De browser bouwt de CSSOM-boom (CSS Object Model) uit de CSS.
    • De browser bouwt de renderboom door DOM en CSSOM te combineren.
    • De browser voert JavaScript uit (kan DOM en CSSOM wijzigen).
    • De browser berekent de layout van de elementen op de pagina (Layout).
    • De browser tekent de elementen op het scherm (Painting).