Kuidas töötleb brauser veebilehte?

Veebilehe töötlemise protsess brauseris võib jagada mitmeks etapiks:

1. Päring ja ressursi saamine:

   • Kasutaja sisestab URL-i aadressiribal või klõpsab lingil.
   • Brauser saadab HTTP-päringu serverile.
   • Server töötleb päringu ja saadab vastuse, mis tavaliselt sisaldab HTML-dokumenti.

2. Süntaksi analüüs (Parsing):

   • Brauser saab HTML-dokumendi baitidena.
   • Need baitid dekodeeritakse märkideks vastavalt määratud kodeeringule.
   • HTML parser analüüsib dokumenti märkide kaupa ja loob DOM puu (Document Object Model). DOM esindab dokumendi loogilist struktuuri.
   • Kui leitakse <link> (CSS) või <script> (JavaScript) sildid, algab nende ressursside allalaadimine paralleelselt HTML analüüsiga.

3. CSSOM-i loomine:

   • CSS parser analüüsib <style> siltide, <link> siltide ja inline stiilide CSS reegleid.
   • Nende reeglite põhjal luuakse CSSOM puu (CSS Object Model), mis sisaldab kõiki stiile iga lehe elemendi jaoks.

4. Render puu loomine:

   • Render puu ühendab DOM-i ja CSSOM-i. See sisaldab ainult neid elemente, mis kuvatakse lehel, ning nende stiile.
   • Elemendid, millele on määratud CSS reegel display: none;, ei kuulu Render puusse.

5. Paigutus (Layout / Reflow):

   • Brauser arvutab iga elemendi täpsed geomeetrilised mõõtmed ja asukoha, tuginedes Render puule. Seda protsessi nimetatakse Layout või Reflow.
   • Layout toimub esimese Render puu loomise ajal ning ka siis, kui akna suurus muutub, elemente lisatakse või eemaldatakse, või muudetakse nende stiile (nt suurused, vahed).

6. Joonistamine (Painting / Repaint):

   • Brauser joonistab iga elemendi ekraanile, kasutades Render puu infot ja Layouti tulemusi.
   • Joonistamine võib toimuda ka, kui muudetakse elemendi nähtavaid omadusi, nagu värv, taust, läbipaistvus, ilma et muutuks selle geomeetria (seda nimetatakse Repaint).

7. Komponeerimine (Compositing):

   • Joonistamise elemendid võivad olla ühendatud erinevates kihtides optimeerimiseks ja animatsioonideks.
   • Need kihid ühendatakse, et kuvada lõplik leht ekraanil.

8. Skripti täitmine:

   • Kui HTML parser jõuab <script> sildini, peatub HTML analüüs ajutiselt (vaikimisi) ning brauser laadib alla, analüüsib ja täidab JavaScripti koodi.
   • JavaScript võib muuta DOM-i ja CSSOM-i, mis võib põhjustada uusi Layout ja Painting samme.
   • <script> sildi async ja defer atribuudid mõjutavad skriptide täitmise järjekorda ja aega, võimaldades jätkata HTML analüüsi.

Siin on protsessi ligikaudne visualiseerimine:

HTTP Päring
↓
HTML bait
↓
HTML parser
→ CSS parser (paralleelselt)
    ↓           ↓
    DOM puu  CSSOM puu
          ↓
     Render puu
          ↓
        Layout
          ↓
       Joonistamine
          ↓
     Komponeerimine
          ↓
   Ekraani kuvamine

JavaScripti täitmine võib sekkuda erinevatesse etappidesse, põhjustades korduvaid samme:

HTML parser + Script sildid
↓
HTML analüüsi paus
↓
Skripti allalaadimine
↓
Skripti analüüs
↓
Skripti täitmine
↓
(Võib muuta DOM/CSSOM-i → põhjustada Layout/Repaint)
↓
HTML analüüsi jätkumine