Ինչպես է HTML-ը վերածվում վեբ էջի?

HTML-թղթի վերափոխման գործընթացը ներառում է մի քանի հիմնական փուլ.

HTML-ի վերլուծում:
- Բրաուզերը կարդում է HTML կոդը և կառուցում օբյեկտների ծառ — DOM (Document Object Model):
- DOM-ը ներկայացնում է փաստաթղթի կառուցվածքը որպես հանգույցներ (էլեմենտներ,ատրիբուտներ,տեքստ):
CSS-ի վերլուծում:
- Բրաուզերը կարդում է CSS ոճերը (արտաքին, ներքին, inline):
- Կառուցվում է ոճերի ծառ — CSSOM (CSS Object Model):
Render ծառի կառուցում:
- DOM և CSSOM միավորվում են:
- Ստեղծվում է օբյեկտների ծառ, որը պարունակում է տեսողական տեղեկատվություն (որոնք էլեմենտները տեսանելի են և ինչպես պետք է տեսք ունենան): display: none էլեմենտները չեն մտնում Render Tree:
Տեղադրման (Layout/Reflow):
- Հստակ հաշվարկվում են յուրաքանչյուր էլեմենտի ճարտարապետական կոորդինատները և չափերը:
- Եթե չափերը կամ դիրքը փոխվում է, տեղի է ունենում վերաձևավորում:
Նկարագրում (Painting):
- Վիզուալ կերպով ցուցադրվում են պիքսելները, օգտագործելով Render Tree-ից և տեղադրման արդյունքներից:
- Կատարվում է շերտավոր նկարագրում (background, border, content):
Կոմպոզիցիա (Compositing):
- Տարբեր շերտերը շերտավորվում են ճիշտ հերթականությամբ՝ վերջնական պատկերը կազմելու համար:

Այս փուլերը կատարվում են հերթականությամբ, բայց որոշ փուլեր կարող են կրկնվել (օրինակ, Layout և Painting DOM կամ ոճերի փոփոխությունից հետո):

<!-- Պարզ HTML5 փաստաթղթի օրինակ -->
<!DOCTYPE html>
<html>
<head>
    <title>Օրինակ էջ</title>
    <style>
        /* CSS ոճերի օրինակ */
        h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>Բարև, աշխարհ!</h1> <!-- էլեմենտ, որը կավելացվի DOM և Render Tree-ին -->
    <p style="display: none;">Այս տեքստը թաքնված է:</p> <!-- էլեմենտ DOM-ում, բայց ոչ Render Tree-ում -->
</body>
</html>

/* CSSOM-ի օրինակ HTML-ի ոճերից */
/* ներկայացնում է ոճերի կառուցվածքը */
h1 {
    color: blue;
}

Բրաուզերը վերլուծում է HTML և CSS-ը, կառուցում է ներքին մոդելներ, հաշվարկում է տարրերի դիրքը և նկարում դրանք էկրանին։