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

Η διαδικασία επεξεργασίας μιας ιστοσελίδας από τον περιηγητή μπορεί να χωριστεί σε διάφορα στάδια:

1. Αίτημα και λήψη πόρου:

   • Ο χρήστης εισάγει το URL στη γραμμή διευθύνσεων ή κάνει κλικ σε έναν σύνδεσμο.
   • Ο περιηγητής στέλνει ένα HTTP αίτημα στον διακομιστή.
   • Ο διακομιστής επεξεργάζεται το αίτημα και στέλνει μια απάντηση που περιέχει συνήθως ένα HTML έγγραφο.

2. Συντακτική ανάλυση (Parsing):

   • Ο περιηγητής λαμβάνει το HTML έγγραφο σε μορφή byte.
   • Αυτά τα bytes αποκωδικοποιούνται σύμφωνα με την καθορισμένη κωδικοποίηση σε χαρακτήρες.
   • Ο HTML parser αναλύει το έγγραφο χαρακτήρα προς χαρακτήρα και κατασκευάζει το δέντρο DOM (Document Object Model). Το DOM αντιπροσωπεύει τη λογική δομή του εγγράφου.
   • Όταν εντοπίζει ετικέτες <link> (για CSS) ή <script> (για JavaScript), ο περιηγητής ξεκινά τη λήψη αυτών των πόρων παράλληλα με την ανάλυση του HTML.

3. Κατασκευή του CSSOM:

   • Ο CSS parser αναλύει τους κανόνες CSS από τις ετικέτες <style>, <link> και inline στυλ.
   • Με βάση αυτούς τους κανόνες, κατασκευάζεται το δέντρο CSSOM (CSS Object Model), που περιέχει όλα τα στυλ για κάθε στοιχείο στη σελίδα.

4. Κατασκευή του δέντρου απόδοσης (Render Tree):

   • Το Render Tree συνδυάζει το DOM και το CSSOM. Περιέχει μόνο τα στοιχεία που θα εμφανιστούν στη σελίδα και τα αντίστοιχα στυλ τους.
   • Τα στοιχεία με το CSS display: none; δεν περιλαμβάνονται στο Render Tree.

5. Μέγεθος (Layout / Reflow):

   • Ο περιηγητής υπολογίζει τις ακριβείς γεωμετρικές διαστάσεις και τη θέση κάθε στοιχείου στη σελίδα βάσει του Render Tree. Αυτή η διαδικασία ονομάζεται Layout ή Reflow.
   • Το Layout πραγματοποιείται κατά την πρώτη κατασκευή του Render Tree, καθώς και όταν αλλάζουν το μέγεθος του παραθύρου, προστίθενται ή αφαιρούνται στοιχεία, ή αλλάζουν τα στυλ τους.

6. Ζωγραφική (Painting / Repaint):

   • Ο περιηγητής ζωγραφίζει κάθε στοιχείο στην οθόνη, χρησιμοποιώντας τις πληροφορίες από το Render Tree και τα αποτελέσματα του βήματος Layout.
   • Η ζωγραφική μπορεί επίσης να συμβεί όταν αλλάζουν ορατές ιδιότητες του στοιχείου, όπως το χρώμα, το φόντο, η διαφάνεια, χωρίς να αλλάζει η γεωμετρία του (αυτή η διαδικασία ονομάζεται Repaint).

7. Σύνθεση (Compositing):

   • Τα ζωγραφισμένα στοιχεία μπορούν να συνδυαστούν σε διαφορετικά στρώματα για βελτιστοποίηση της απόδοσης και των κινούμενων εικόνων.
   • Αυτά τα στρώματα συνδυάζονται τελικά για την εμφάνιση της τελικής σελίδας στην οθόνη.

8. Εκτέλεση scripts:

   • Όταν ο HTML parser φτάνει σε μια ετικέτα <script>, η ανάλυση του HTML παύει (κατά κανόνα), και ο περιηγητής κατεβάζει, αναλύει και εκτελεί τον κώδικα JavaScript.
   • Το JavaScript μπορεί να αλλάξει το DOM και το CSSOM, προκαλώντας επανεκτέλεση των βημάτων Layout και Painting.
   • Τα χαρακτηριστικά async και defer στην ετικέτα <script> επηρεάζουν τη σειρά και το χρόνο εκτέλεσης των scripts, επιτρέποντας την συνέχιση της ανάλυσης HTML.

Ακολουθεί μια τυπική απεικόνιση της ροής:

HTTP Request
↓
HTML Bytes
↓
HTML Parser
→ CSS Parser (Παράλληλα)
    ↓           ↓
    DOM Tree  CSSOM Tree
          ↓
     Render Tree
          ↓
        Layout
          ↓
       Painting
          ↓
     Compositing
          ↓
   Οθόνη

Η εκτέλεση JavaScript μπορεί να διακοπεί σε διάφορα στάδια, προκαλώντας επανεκτέλεση:

HTML Parser + Script tag
↓
Παύση ανάλυσης HTML
↓
Λήψη Script
↓
Ανάλυση Script
↓
Εκτέλεση Script
↓
(Ενδεχομένως τροποποιεί το DOM/CSSOM → προκαλεί Layout/Rendering)
↓
Συνέχιση ανάλυσης HTML

Η κατανόηση αυτής της διαδικασίας είναι σημαντική για τη βελτιστοποίηση της απόδοσης των ιστοσελίδων.