Kaip naršyklė apdoroja tinklalapį?

Vebpuslapio apdorojimo procesas naršyklėje gali būti suskirstytas į kelis etapus:

1. Užklausos ir ištekliaus gavimo etapas:

   • Vartotojas įveda URL į adreso juostą arba paspaudžia nuorodą.
   • Naršyklė siunčia HTTP užklausą serveriui.
   • Serveris apdoroja užklausą ir siunčia atsakymą, dažniausiai turintį HTML dokumentą.

2. Sintaksės analizė (Parsing):

   • Naršyklė gauna HTML dokumentą baitais.
   • Šie baitai dekoduojami į simbolius pagal nurodytą koduotę.
   • HTML parseris analizuoja dokumentą simboliais ir kuria DOM medį (Document Object Model). DOM atvaizduoja dokumento loginę struktūrą.
   • Suradęs <link> (CSS) arba <script> (JavaScript) žymes, naršyklė pradeda šių išteklių atsisiuntimą paraleliai su HTML analizavimu.

3. CSSOM kūrimas:

   • CSS parseris analizuoja <style> žymių, <link> žymių ir inline stilių CSS taisykles.
   • Remiantis šiomis taisyklėmis kuriamas CSSOM medis (CSS Object Model), kuris apima visus stilius kiekvienam puslapio elementui.

4. Render medžio kūrimas:

   • Render medis sujungia DOM ir CSSOM. Jame yra tik tie elementai, kurie bus rodomi puslapyje, ir jų stiliai.
   • Elementai, kuriems nustatyta display: none;, į Render medį neįtraukiami.

5. Dizaino (Layout / Reflow):

   • Naršyklė apskaičiuoja tikslius geometrinius dydžius ir kiekvieno elemento padėtį remiantis Render medžiu. Šis procesas vadinamas Layout arba Reflow.
   • Layout vyksta pirmojo Render medžio kūrimo metu, taip pat keičiant lango dydį, pridedant ar šalinant elementus, keičiant jų stilių (pvz., dydžius, tarpines).

6. Piešimas (Painting / Repaint):

   • Naršyklė nupiešia kiekvieną elementą ekrane, naudodama informaciją iš Render medžio ir Layout rezultatų.
   • Piešimas taip pat gali vykti keičiant matomų elemento savybių, tokių kaip spalva, fonas, permatomumas, be jo geometrinių parametrų keitimo (vadinama Repaint).

7. Kompozicija (Compositing):

   • Piešiamieji elementai gali būti sujungti į skirtingus sluoksnius optimizacijai ir animacijai.
   • Šie sluoksniai vėliau sujungiami, kad būtų rodomas galutinis puslapis ekrane.

8. Skriptų vykdymas:

   • Kai HTML parseris pasiekia <script> žymę, HTML analizė laikinai sustoja (pagal numatytuosius nustatymus), ir naršyklė atsisiunčia, analizuoja ir vykdo JavaScript kodą.
   • JavaScript gali keisti DOM ir CSSOM, kas gali sukelti naujus Layout ir Painting žingsnius.
   • <script> žymės atributai async ir defer įtakoja skriptų vykdymo tvarką ir laiką, leidžiant tęsti HTML analizę.

Štai apytikslė proceso vizualizacija:

HTTP užklausa
↓
HTML baitai
↓
HTML parseris
→ CSS parseris (paraleliai)
    ↓           ↓
    DOM medis  CSSOM medis
          ↓
     Render medis
          ↓
        Layout
          ↓
       Piešimas
          ↓
     Kompozicija
          ↓
   Ekrano rodymas

JavaScript vykdymas gali įsiterpti į įvairius etapus, sukeldamas pakartotinius žingsnius:

HTML parseris + Script žymė
↓
HTML analizės pauzė
↓
Skriptų atsisiuntimas
↓
Skriptų analizė
↓
Skriptų vykdymas
↓
(Gali keisti DOM/CSSOM → sukelti Layout/Paint)
↓
HTML analizės tęsinys