Jak przeglądarka parsuje plik HTML?

Przeglądarka odczytuje plik HTML bajt po bajcie. Na podstawie kodowania pliku tworzony jest strumień znaków. Strumień ten jest analizowany, tworząc tokeny (otwierający i zamykający tag, tekst, komentarz, doctype). Tokeny są przekształcane w węzły (nodes), które są łączone w drzewo: Document Object Model (DOM).

Proces parsowania przebiega przez następujące etapy:

Odczyt bajtów: Przeglądarka otrzymuje strumień bajtów.
Określenie kodowania: Ustalane jest kodowanie pliku (np. UTF-8, Windows-1251). Może to odbywać się przez nagłówki HTTP, tagi <meta> lub automatyczne wykrywanie.
Konwersja na znaki: Bajty są konwertowane na znaki zgodnie z ustalonym kodowaniem.

Tokenizacja: Strumień znaków jest dzielony na tokeny.

<!-- Przykład tokenów -->
<p> // Token: otwierający tag "p"
  Witaj, // Token: tekst "Witaj, "
  świecie! // Token: tekst "świecie!"
</p> // Token: zamykający tag "p"

Budowa drzewa AST (DOM): Na podstawie sekwencji tokenów buduje się drzewo węzłów (DOM). Przeglądarka utrzymuje stos otwartych tagów; gdy napotyka tag zamykający, zamyka odpowiadający mu tag na stosie i dodaje jego węzeł do drzewa.

<!-- Prosta struktura DOM dla: -->
<!DOCTYPE html>
<html>
  <head>
    <title>Przykład</title>
  </head>
  <body>
    <p>Tekst</p>
  </body>
</html>

// Drzewo DOM będzie miało strukturę odzwierciedlającą zagnieżdżenie tagów.
// Na przykład, węzeł "p" będzie potomkiem węzła "body".

Analiza skryptów i stylów: Podczas analizy HTML, przeglądarka napotyka tagi <script> i <link>/<style>.
- <script>: Domyślnie, analiza HTML jest wstrzymywana, skrypt jest ładowany, analizowany i wykonywany. Po wykonaniu, analiza HTML jest wznawiana. Atrybuty async i defer zmieniają to zachowanie. async wykonuje skrypt asynchronicznie, nie blokując analizy. defer opóźnia wykonanie skryptu do czasu zakończenia analizy HTML.
- <link> / <style>: CSS jest analizowany równolegle z HTML i tworzy Model Obiektu CSS (CSSOM). Obecność <link> przed <script> może opóźnić wykonanie skryptu, ponieważ przeglądarka może oczekiwać na zbudowanie CSSOM, aby zapewnić poprawne zastosowanie stylów przed wykonaniem skryptu.