Πώς φορτώνεται μια ιστοσελίδα;

Ο χρήστης εισάγει μια διεύθυνση URL στη γραμμή διευθύνσεων του προγράμματος περιήγησης ή κάνει κλικ σε έναν σύνδεσμο.
Ανάλυση URL: Ο περιηγητής αναλύει το URL για να προσδιορίσει το πρωτόκολλο, τον τομέα, την πόρτα και τη διαδρομή.
Αναζήτηση IP διεύθυνσης: Ο περιηγητής ελέγχει την κρυφή μνήμη DNS, στη συνέχεια την κρυφή μνήμη του λειτουργικού συστήματος, και στη συνέχεια την κρυφή μνήμη του δρομολογητή. Αν η διεύθυνση δεν βρεθεί τοπικά, αποστέλλεται αίτημα σε διακομιστή DNS για λήψη IP διεύθυνσης του ονόματος τομέα.
Καθιέρωση TCP σύνδεσης (Handshake): Ο περιηγητής δημιουργεί TCP σύνδεση με τον διακομιστή με τη ληφθείσα IP διεύθυνση (τριμερής χειραψία: SYN -> SYN-ACK -> ACK).
Αποστολή HTTP αιτήματος: Ο περιηγητής στέλνει HTTP αίτημα (συνήθως GET) στον διακομιστή με την αναφορά του απαιτούμενου πόρου (διαδρομή), των κεφαλίδων (User-Agent, Accept-Encoding, Cookie κ.ά.) και του σώματος του αιτήματος (αν υπάρχει).
```
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  
```
Επεξεργασία του αιτήματος από τον διακομιστή: Ο διακομιστής λαμβάνει το αίτημα, το επεξεργάζεται (π.χ., εκτελεί σκριπτ στην πλευρά του διακομιστή) και δημιουργεί την απάντηση HTTP.
Αποστολή της απάντησης HTTP: Ο διακομιστής στέλνει την απάντηση HTTP πίσω στον περιηγητή. Η απάντηση περιλαμβάνει τον κωδικό κατάστασης (π.χ., 200 OK), τις κεφαλίδες (Content-Type, Content-Length, Cache-Control κ.ά.) και το σώμα της απάντησης (περιεχόμενο του ζητούμενου πόρου, π.χ., αρχείο HTML).
```
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 και κατασκευή DOM: Ο περιηγητής λαμβάνει τον κώδικα HTML και τον αναλύει, δημιουργώντας το αντικειμενικό μοντέλο του εγγράφου (DOM - Document Object Model) στη μνήμη. Το DOM αντιπροσωπεύει το δέντρο των στοιχείων HTML.
Φόρτωση και επεξεργασία πόρων: Κατά την ανάλυση HTML, ο περιηγητής συναντά συνδέσμους σε άλλους πόρους (CSS, JavaScript, εικόνες, γραμματοσειρές κ.ά.). Για κάθε πόρο, εκτελούνται τα βήματα 3-7 (εύρεση IP, TCP σύνδεση, HTTP αίτημα/απάντηση). Η φόρτωση αυτών των πόρων μπορεί να γίνεται παράλληλα (περιορισμένο από τον αριθμό των ταυτόχρονων συνδέσεων).
Κατασκευή CSSOM: Ο περιηγητής αναλύει αρχεία CSS και μπλοκ <style> στο HTML, δημιουργώντας το αντικειμενικό μοντέλο CSS (CSSOM - CSS Object Model). Το CSSOM αντιπροσωπεύει τα στυλ που εφαρμόζονται στα στοιχεία της σελίδας.
Κατασκευή Render Tree: Ο περιηγητής συνδυάζει το DOM και το CSSOM για να δημιουργήσει το δέντρο απόδοσης (Render Tree). Το Render Tree περιέχει μόνο ορατά στοιχεία και τα στυλ τους. Τα στοιχεία με display: none δεν περιλαμβάνονται.
Layout (Reflow): Ο περιηγητής υπολογίζει τη θέση και το μέγεθος κάθε στοιχείου στη σελίδα, βασιζόμενος στο Render Tree, το μέγεθος του παραθύρου και τα στυλ.
Painting (Repaint): Ο περιηγητής ζωγραφίζει κάθε στοιχείο στην οθόνη στις υπολογισμένες θέσεις και με τα εφαρμοσμένα στυλ. Αυτό γίνεται σε στρώματα.
Σύνθεση: Ο περιηγητής συνδυάζει τα ζωγραφισμένα στρώματα σε μια τελική εικόνα που εμφανίζεται στην οθόνη του χρήστη.
Εκτέλεση JavaScript: Καθώς φορτώνουν και αναλύονται τα σκριπτ, ο κώδικας JavaScript εκτελείται. Η εκτέλεση JavaScript μπορεί να επηρεάσει το DOM και το CSSOM, προκαλώντας επανάληψη των βημάτων Layout και Painting (Reflow/Repaint).

Βασικά στάδια εμφάνισης περιεχομένου:

DOMContentLoaded: Το γεγονός ενεργοποιείται όταν ο περιηγητής έχει φορτώσει και αναλύσει πλήρως το HTML έγγραφο και έχει κατασκευάσει το DOM, αλλά περιμένει τη φόρτωση των φύλλων στυλ, εικόνων και υποπλαισίων.
Load: Το γεγονός ενεργοποιείται όταν ολόκληρη η σελίδα, συμπεριλαμβανομένων εικόνων, σκριπτ, στυλ και άλλων πόρων, έχει φορτωθεί πλήρως.