Middle
Πώς γίνεται η απόδοση του ιστότοπου για τον χρήστη;
sobes.tech AI
Απάντηση από AI
- Ο χρήστης εισάγει το URL στον περιηγητή. Ο περιηγητής στέλνει ένα αίτημα DNS για να λάβει τη διεύθυνση IP του διακομιστή.
- Ο περιηγητής δημιουργεί μια σύνδεση TCP με τον διακομιστή. Συνήθως χρησιμοποιείται το πρωτόκολλο HTTP/S.
- Ο περιηγητής στέλνει ένα αίτημα HTTP στον διακομιστή. Ζητούνται το έγγραφο HTML και άλλοι πόροι (CSS, JavaScript, εικόνες).
- Ο διακομιστής επεξεργάζεται το αίτημα και στέλνει μια απάντηση HTTP. Η απάντηση περιέχει τους ζητούμενους πόρους και πληροφορίες κατάστασης.
- Ο περιηγητής λαμβάνει το έγγραφο HTML. Ξεκινά η ανάλυση του HTML.
- Δημιουργείται το DOM (Document Object Model). Δέντρο αντικειμένων που αντιπροσωπεύει τη δομή του HTML.
- Ο περιηγητής ανιχνεύει στους συνδέσμους HTML προς εξωτερικούς πόρους (CSS, JavaScript, εικόνες). Γίνονται επιπλέον αιτήματα για την απόκτησή τους.
- Ο περιηγητής λαμβάνει τα στυλ CSS. Ξεκινά η ανάλυση του CSS.
- Δημιουργείται το CSSOM (CSS Object Model). Δέντρο αντικειμένων που αντιπροσωπεύει τα στυλ.
- Δημιουργείται το δέντρο απόδοσης. Συνένωση του DOM και του CSSOM. Περιέχει μόνο ορατά στοιχεία και τα στυλ τους.
- Layout (ή Reflow). Υπολογίζονται οι γεωμετρικές διαστάσεις και η θέση κάθε στοιχείου στη σελίδα.
- Paint (ή Repaint). Τα στοιχεία ζωγραφίζονται στην οθόνη σύμφωνα με τα στυλ και τη θέση τους.
- Σύνθεση. Η σελίδα συντίθεται στρώση-στρώση για την εμφάνιση στον χρήστη.
- Ο περιηγητής λαμβάνει αρχεία JavaScript. Ξεκινά η ανάλυση και η εκτέλεση του κώδικα. Το JavaScript μπορεί να τροποποιήσει το DOM και το CSSOM, οδηγώντας σε επαναυπολογισμό του Layout και του Paint.
- Εμφάνιση της σελίδας στον χρήστη. Καθώς λαμβάνονται οι πόροι και ολοκληρώνονται τα βήματα, ο χρήστης βλέπει το περιεχόμενο της σελίδας.