Kako pregledač parsira HTML fajl?

Браузер чита HTML датотеку байт по байт. На основу кодирања датотеке, гради се ток симбола. Овај ток се парсира, формирајући токене (отворени и затворени таг, текст, коментар, doctype). Токени се претварају у чворове (nodes), који се повезују у дрво: Document Object Model (DOM).

Процес парсирања пролази кроз следеће фазе:

Читање байтова: Браузер добија ток байтова.
Одређивање кодирања: Одређује се кодирање датотеке (нпр. UTF-8, Windows-1251). Ово може бити преко HTTP заглавља, <meta> тагова или аутоматског детекције.
Преобразовање у симболе: Бајтови се претварају у симболе у складу са одређеним кодирањем.

Tokenizacija: Ток симбола се дели на токене.

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

Изградња AST (Дрво DOM): На основу секвенце токена, гради се дрво чворова (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-а како би обезбедио исправну примену стилова пре извршавања скрипта.