Πώς αναλύει ο περιηγητής ένα αρχείο HTML;

Ο περιηγητής διαβάζει το αρχείο HTML byte προς byte. Βάσει της κωδικοποίησης του αρχείου, κατασκευάζεται μια ροή χαρακτήρων. Αυτή η ροή αναλύεται, σχηματίζοντας tokens (ανοίγοντας και κλείνοντας ετικέτες, κείμενο, σχόλιο, doctype). Τα tokens μετατρέπονται σε κόμβους (nodes), που συνδέονται σε ένα δέντρο: το Document Object Model (DOM).

Η διαδικασία ανάλυσης περνά από τα εξής στάδια:

Ανάγνωση bytes: Ο περιηγητής λαμβάνει μια ροή bytes.
Καθορισμός κωδικοποίησης: Ορίζεται η κωδικοποίηση του αρχείου (π.χ., UTF-8, Windows-1251). Αυτό μπορεί να γίνει μέσω των κεφαλίδων HTTP, των ετικετών <meta> ή μέσω αυτόματης ανίχνευσης.
Μετατροπή σε χαρακτήρες: Τα bytes μετατρέπονται σε χαρακτήρες σύμφωνα με την καθορισμένη κωδικοποίηση.

Tokenization: Η ροή χαρακτήρων διαχωρίζεται σε tokens.

<!-- Παράδειγμα tokens -->
<p> // Token: ανοικτή ετικέτα "p"
  Γειά σου, // Token: κείμενο "Γειά σου, "
  κόσμε! // Token: κείμενο "κόσμε!"
</p> // Token: κλειστή ετικέτα "p"

Κατασκευή του AST (Δέντρο DOM): Βάσει της ακολουθίας των tokens, κατασκευάζεται ένα δέντρο κόμβων (DOM). Ο περιηγητής διατηρεί μια στοίβα με ανοιχτές ετικέτες· όταν συναντά μια κλειστή ετικέτα, κλείνει την αντίστοιχη ανοιχτή ετικέτα από τη στοίβα και προσθέτει τον κόμβο της στο δέντρο.
```

<!DOCTYPE html>
<html>
  <head>
    <title>Παράδειγμα</title>
  </head>
  <body>
    <p>Κείμενο</p>
  </body>
</html>

// Το δέντρο DOM θα έχει μια δομή που αντικατοπτρίζει την εμφωλευμένη δομή των ετικετών.
// Για παράδειγμα, ο κόμβος "p" θα είναι παιδί του κόμβου "body".
```
Ανάλυση scripts και styles: Κατά τη διάρκεια της ανάλυσης HTML, ο περιηγητής συναντά τις ετικέτες <script> και <link>/<style>.
- <script>: Κατά προεπιλογή, η ανάλυση HTML διακόπτεται, το script φορτώνεται, αναλύεται και εκτελείται. Μετά την εκτέλεση, η ανάλυση HTML συνεχίζεται. Τα χαρακτηριστικά async και defer αλλάζουν αυτή τη συμπεριφορά. Το async εκτελεί το script ασύγχρονα, χωρίς να μπλοκάρει την ανάλυση. Το defer καθυστερεί την εκτέλεση του script μέχρι να ολοκληρωθεί η ανάλυση HTML.
- <link> / <style>: Τα CSS αναλύονται παράλληλα με το HTML και δημιουργούν το CSS Object Model (CSSOM). Η παρουσία του <link> πριν από το <script> μπορεί να καθυστερήσει την εκτέλεση του script, καθώς ο περιηγητής μπορεί να περιμένει την κατασκευή του CSSOM για να διασφαλίσει την σωστή εφαρμογή των στυλ πριν την εκτέλεση του script.