Kako pregledač obrađuje veb stranicu?

Proces obrade veb stranice od strane pregledača može se podeliti na nekoliko faza:

1. Zahtev i preuzimanje resursa:

   • Korisnik unosi URL u adresnu traku ili klikne na link.
   • Pregledač šalje HTTP zahtev serveru.
   • Server obrađuje zahtev i šalje odgovor koji obično sadrži HTML dokument.

2. Sintaksička analiza (Parsing):

   • Pregledač prima HTML dokument u obliku bajtova.
   • Ovi bajtovi se dekodiraju u znakove prema navedenoj kodnoj stranici.
   • HTML parser analizira dokument po znakovima i pravi DOM (Document Object Model) stablo. DOM predstavlja logičku strukturu dokumenta.
   • Kada naiđe na <link> (za CSS) ili <script> (za JavaScript) tagove, pregledač počinje da preuzima te resurse paralelno sa analizom HTML-a.

3. Izgradnja CSSOM-a:

   • CSS parser analizira CSS pravila iz <style> tagova, <link> tagova i inline stilova.
   • Na osnovu ovih pravila, pravi se CSSOM (CSS Object Model) stablo koje sadrži sve stilove za svaki element na stranici.

4. Izgradnja render stabla (Render Tree):

   • Render Tree kombinuje DOM i CSSOM. Sadrži samo elemente koji će biti prikazani na stranici i njihove stilove.
   • Elementi sa CSS pravilom display: none; se ne uključuju u Render Tree.

5. Raspored (Layout / Reflow):

   • Pregledač izračunava tačne geometrijske dimenzije i poziciju svakog elementa na osnovu Render Tree. Ovaj proces se zove Layout ili Reflow.
   • Layout se vrši pri prvom izgradnji Render Tree, kao i pri promeni veličine prozora, dodavanju ili uklanjanju elemenata ili promeni njihovih stilova.

6. Slika (Painting / Repaint):

   • Pregledač crta svaki element na ekranu koristeći informacije iz Render Tree i rezultate koraka Layout.
   • Slika se može izvršiti i pri promeni vidljivih svojstava elementa, kao što su boja, pozadina, providnost, bez promene njegove geometrije (ovo se naziva Repaint).

7. Kompizicija:

   • Crtani elementi mogu biti objedinjeni na različitim slojevima radi optimizacije prikaza i animacija.
   • Ovi slojevi se zatim kombinuju za prikaz završne stranice na ekranu.

8. Izvršavanje skripti:

   • Kada HTML parser dođe do <script> taga, analiza HTML-a se zaustavlja (po defaultu), i pregledač preuzima, analizira i izvršava JavaScript kod.
   • JavaScript može menjati DOM i CSSOM, što može izazvati ponovne korake Layout i Painting.
   • Atributi async i defer za <script> tagove utiču na redosled i vreme izvršavanja skripti, omogućavajući nastavak analize HTML-a.

Evo približne vizualizacije toka:

HTTP zahtev
↓
HTML bajtovi
↓
HTML parser
→ CSS parser (paralelno)
    ↓           ↓
    DOM stablo  CSSOM stablo
          ↓
     Render stablo
          ↓
        Layout
          ↓
       Slika
          ↓
     Kompozicija
          ↓
   Ekran

Izvršavanje JavaScript-a može biti prekinuto u različitim fazama, izazivajući ponovne korake:

HTML parser + `<script>` tag
↓
Pauza HTML parsiranja
↓
Preuzimanje skripte
↓
Analiza skripte
↓
Izvršavanje skripte
↓
(Moguće modifikacije DOM/CSSOM → izazivanje Layout/Repaint)
↓
Nastavak HTML parsiranja

Razumevanje ovog procesa je važno za optimizaciju performansi veb stranica.