Браузер HTML файлын кантип талдайт?

Браузер HTML файлын байт-байт окуйт. Файлдын кодировкасына негизделип, белгилер агымы түзүлөт. Бул агым парсингден өтүп, токендерди (ачуучу жана жабуучу тег, текст, комментарий, doctype) түзөт. Токендер узулдарга (nodes) айландырылып, даракка (Document Object Model, DOM) байланат.

Парсинг процесси төмөнкү этаптардан өтөт:

Байткаларды окуу: Браузер байткалар агымын алат.
Коддоону аныктоо: Файлдын коддоосу аныкталат (мисалы, UTF-8, Windows-1251). Бул HTTP баштамалар, <meta> тегдери же автоматтык түрдө аныкталышы мүмкүн.
Белгилерге айландыруу: Байткалар белгилерге айланат, белгилүү коддоого ылайык.

Токенизация: Белгилер агымы токендерге бөлүнөт.

<!-- Токендердин мисалы -->
<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 түзүүнү күтүшү мүмкүн, бул стили туура колдонуу үчүн маанилүү.