Ինչպե՞ս է բրաուզերը մշակում վեբ էջը։

Վեբ էջի մշակման գործընթացը բրաուզերի կողմից կարող է բաժանվել մի քանի փուլերի.

1. Հարցում և ռեսուրսի ստացում:

   • Օգտատերը մուտքագրում է URL հասցեն հասցեային տողում կամ սեղմում է հղման վրա:
   • Բրաուզերը ուղարկում է HTTP հարցում սերվերին:
   • Սերվերը մշակում է հարցումը և ուղարկում պատասխան, որը սովորաբար պարունակում է HTML փաստաթուղթ:

2. **Սինտաքսական վերլուծություն (Parsing):

   • Բրաուզերը ստանում է HTML փաստաթուղթը բայթերի տեսքով:
   • Այս բայթերը դեկոդավորվում են նշված կոդավորմամբ նշանների:
   • HTML վերլուծիչը վերլուծում է փաստաթուղթը նշան առ նշան և կառուցում DOM (Document Object Model) ծառը:
   • Երբ հայտնաբերում է <link> (CSS-ի համար) կամ <script> (JavaScript-ի համար) տեգերը, բրաուզերը սկսում է այդ ռեսուրսների ներբեռնումը միաժամանակ HTML վերլուծության հետ:

3. **CSSOM-ի կառուցում:

   • CSS վերլուծիչը վերլուծում է <style> տեգերից, <link> տեգերից և inline ոճերից CSS կանոնները:
   • Այս կանոնների հիման վրա կառուցվում է CSSOM (CSS Object Model) ծառը, որը պարունակում է բոլոր ոճերը յուրաքանչյուր տարրին էջում:

4. **Render ծառի կառուցում:

   • Render Tree-ն միավորում է DOM-ը և CSSOM-ը:
   • Այն պարունակում է միայն այն տարրերը, որոնք ցուցադրվելու են էջում, և նրանց համապատասխան ոճերը:
   • <style> տեգում display: none; կանոնով նշված տարրերը չեն ներառվում Render Tree-ում:

5. **Տարրերի դասավորություն (Layout / Reflow):

   • Բրաուզերը հաշվարկում է յուրաքանչյուր տարրի ճշգրիտ չափերը և դիրքը Render Tree-ի հիման վրա:
   • Այս գործընթացը կոչվում է Layout կամ Reflow:
   • Layout-ը կատարվում է առաջին անգամ Render Tree-ի կառուցումից հետո, ինչպես նաև երբ փոփոխվում է պատուհանի չափը, ավելացվում կամ հեռացվում են տարրեր, կամ փոփոխվում են նրանց ոճերը:

6. **Նկարագրություն (Painting / Repaint):

   • Բրաուզերը նկարում է յուրաքանչյուր տարր էկրանին՝ օգտագործելով Render Tree-ից և Layout քայլի արդյունքներից:
   • Նկարագրությունը կարող է տեղի ունենալ նաև այն ժամանակ, երբ փոփոխվում են տարրի տեսանելի հատկությունները՝ գույն, ֆոն, թափանցիկություն, առանց նրա գեոմետրիայի փոփոխության:

7. **Կոմպոզիցիա:

   • Նկարագրված տարրերը կարող են միավորվել տարբեր շերտերում՝ օպտիմալացման և անիմացիաների համար:
   • Այս շերտերը միավորվում են վերջնական էջը ցուցադրելու համար:

8. **Սկրիպտների կատարմամբ:

   • Երբ HTML վերլուծիչը հասնում է <script> տեգին, HTML վերլուծումը ժամանակավորապես կանգնեցնում է (համաձայն ստանդարտի), և բրաուզերը ներբեռնում, վերլուծում և executes JavaScript կոդը:
   • JavaScript-ը կարող է փոփոխել DOM և CSSOM, ինչը կարող է կրկնել Layout և Painting քայլերը:
   • <script> տեգի async և defer հատկանիշները ազդում են սցրիպտների կատարման կարգի և ժամանակի վրա՝ թույլ տալով HTML վերլուծության շարունակությունը:

Ահա այս գործընթացի մոտավոր վիզուալիզացիան:

HTTP Հարցում
↓
HTML բայթեր
↓
HTML վերլուծիչ
→ CSS վերլուծիչ (համաժամ)
    ↓           ↓
    DOM ծառ  CSSOM ծառ
          ↓
     Render ծառ
          ↓
        Layout
          ↓
       Նկարագրություն
          ↓
     Կոմպոզիցիա
          ↓
   Էկրան

JavaScript-ի կատարմամբ կարող է միջամտել տարբեր փուլերում՝ կրկնօրինակում քայլերը:

HTML վերլուծիչ + `<script>` տեգ
↓
HTML վերլուծումը դադարեցվում է
↓
Սկրիպտ ներբեռնում
↓
Սկրիպտ վերլուծում
↓
Սկրիպտ կատարում
↓
(Հնարավոր է DOM/CSSOM փոփոխություն → Կատարվում է Layout/Repaint)
↓
HTML վերլուծության շարունակություն

Այս գործընթացի ըմբռնումը կարևոր է վեբ էջերի կատարողականությունը օպտիմալացնելու համար։