Как браузърът парсира HTML файл?

Браузърът чете HTML файла байт по байт. Въз основа на кодирането на файла се изгражда поток от символи. Този поток се анализира, като се формират токени (отварящ и затварящ таг, текст, коментар, doctype). Токените се преобразуват в възли (nodes), които се свързват в дърво: Document Object Model (DOM).

Процесът на парсване преминава през следните етапи:

Четене на байтове: Браузърът получава поток от байтове.
Определяне на кодирането: Определя се кодирането на файла (например, UTF-8, Windows-1251). Това може да стане чрез HTTP заглавия, <meta> тагове или автоматично разпознаване.
Преобразуване в символи: Байтовете се преобразуват в символи според определеното кодирането.

Tokenизация: Потокът от символи се разделя на токени.

<!-- Пример за токени -->
<p> // Токен: отварящ таг "p"
  Здравей, // Токен: текст "Здравей, "
  свят! // Токен: текст "свят!"
</p> // Токен: затварящ таг "p"

Изграждане на AST (DOM дърво): Въз основа на последователността от токени се изгражда дърво от възли (DOM). Браузърът поддържа стек от отворени тагове; когато срещне затварящ таг, той затваря съответния отворен таг от стека и добавя неговия възел към дървото.
```

<!DOCTYPE html>
<html>
  <head>
    <title>Пример</title>
  </head>
  <body>
    <p>Текст</p>
  </body>
</html>

// DOM дървото ще има структура, отразяваща вложеността на таговете.
// Например, възелът "p" ще бъде дете на възела "body".
```
Парсиране на скриптове и стилове: По време на парсирането на HTML, браузърът среща таговете <script> и <link>/<style>.
- <script>: По подразбиране, парсирането на HTML се спира, скриптът се зарежда, анализира и изпълнява. След изпълнение, парсирането на HTML продължава. Атрибутите async и defer променят това поведение. async изпълнява скрипта асинхронно, без да блокира парсирането. defer отлага изпълнението на скрипта до завършване на парсирането на HTML.
- <link> / <style>: CSS се анализира паралелно с HTML и създава CSS Object Model (CSSOM). Наличието на <link> преди <script> може да забави изпълнението на скрипта, тъй като браузърът може да чака за изграждането на CSSOM, за да гарантира правилното прилагане на стиловете преди изпълнението на скрипта.