Πώς επεξεργάζεται ο περιηγητής τη σελίδα;

Ανάλυση URL: Ο περιηγητής αναλύει το URL για να προσδιορίσει το πρωτόκολλο, το όνομα τομέα και τη διαδρομή προς το πόρο.
Αίτημα DNS: Εάν το όνομα τομέα δεν είναι ακόμη στην τοπική μνήμη cache, ο περιηγητής στέλνει ένα αίτημα DNS για να λάβει τη διεύθυνση IP του διακομιστή.
Κατάρτιση σύνδεσης TCP: Ο περιηγητής δημιουργεί μια σύνδεση TCP με τον διακομιστή χρησιμοποιώντας τη ληφθείσα διεύθυνση IP.
Αίτημα HTTP: Ο περιηγητής στέλνει ένα αίτημα HTTP στον διακομιστή, ζητώντας την επιθυμητή ιστοσελίδα.
Λήψη απάντησης HTTP: Ο διακομιστής επεξεργάζεται το αίτημα και στέλνει μια απάντηση HTTP που περιέχει τον κώδικα HTML, CSS, JavaScript και άλλους πόρους.
Ανάλυση HTML: Ο περιηγητής αρχίζει να αναλύει το HTML που λαμβάνει, δημιουργώντας ένα δέντρο DOM (Document Object Model).
Φόρτωση πόρων: Κατά την ανάλυση HTML, ο περιηγητής ανιχνεύει συνδέσμους σε άλλους πόρους (CSS, JS, εικόνες) και αρχίζει να τους φορτώνει, συχνά παράλληλα.
Ανάλυση CSS: Ο περιηγητής αναλύει το CSS, δημιουργώντας ένα δέντρο CSSOM (CSS Object Model).
Δημιουργία του δέντρου απόδοσης (Render Tree): Συνδυάζοντας DOM και CSSOM, ο περιηγητής δημιουργεί ένα δέντρο απόδοσης που περιέχει μόνο ορατούς κόμβους και τα στυλ τους.
Διάταξη (Layout): Ο περιηγητής υπολογίζει τις γεωμετρικές διαστάσεις και τη θέση κάθε στοιχείου στη σελίδα.
Ζωγραφική (Painting): Ο περιηγητής ζωγραφίζει εικονοστοιχεία για κάθε στοιχείο στην οθόνη, βασιζόμενος στο δέντρο απόδοσης και τα αποτελέσματα της διάταξης.
Σύνθεση (Compositing): Εάν η σελίδα περιέχει στρώματα (π.χ., λόγω ιδιοτήτων CSS όπως transform ή opacity), ο περιηγητής συνδυάζει αυτά τα στρώματα για να εμφανίσει την τελική εικόνα.
Επεξεργασία JavaScript: Κατά την ανίχνευση ετικετών <script> ή inline scripts, ο περιηγητής αναλύει, μεταγλωττίζει και εκτελεί το JavaScript. Το JavaScript μπορεί να τροποποιήσει το DOM, το CSSOM και να επηρεάσει τα στάδια διάταξης και ζωγραφικής, προκαλώντας επανάληψη αυτών των βημάτων.