Ինչպես է բրաուզերը վերլուծում 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ատրիբուտները փոխում են այս վարքագիծը:
- <link> / <style>: CSS-ը վերլուծվում է զուգահեռ HTML-ի հետ և ստեղծում է CSS Object Model (CSSOM): <link>-ի առկայությունը <script>-ից առաջ կարող է ուշացնել սցենարի կատարմանը, քանի որ բրաուզերը կարող է սպասել CSSOM-ի կառուցմանը՝ ապահովելու համար ճիշտ ոճերի կիրառումը սցենարի կատարման ժամանակ։