Cum procesează browserul pagina web?

Procesul de procesare a unei pagini web de către browser poate fi împărțit în mai multe etape:

1. Cerere și obținere resursă:

   • Utilizatorul introduce URL-ul în bara de adrese sau face clic pe un link.
   • Browserul trimite o cerere HTTP către server.
   • Serverul procesează cererea și trimite un răspuns, care de obicei conține un document HTML.

2. Analiza sintactică (Parsing):

   • Browserul primește documentul HTML sub formă de bytes.
   • Acești bytes sunt decodați în caractere conform codificării specificate.
   • Parserul HTML analizează documentul caracter cu caracter și construiește arborele DOM (Document Object Model). DOM reprezintă structura logică a documentului.
   • La detectarea etichetelor <link> (pentru CSS) sau <script> (pentru JavaScript), browserul începe descărcarea acestor resurse în paralel cu analiza HTML.

3. Construirea CSSOM:

   • Parserul CSS analizează regulile CSS din etichetele <style>, <link> și stilurile inline.
   • Pe baza acestor reguli, se construiește arborele CSSOM (CSS Object Model), care conține toate stilurile pentru fiecare element de pe pagină.

4. Construirea arborelui de randare (Render Tree):

   • Render Tree combină DOM și CSSOM. Conține doar elementele care vor fi afișate pe pagină și stilurile lor corespunzătoare.
   • Elementele cu regula CSS display: none; nu sunt incluse în Render Tree.

5. Layout (Reflow):

   • Browserul calculează dimensiunile și pozițiile exacte ale fiecărui element pe baza Render Tree. Acest proces se numește Layout sau Reflow.
   • Layout-ul are loc la prima construcție a Render Tree și, de asemenea, când se schimbă dimensiunea ferestrei, se adaugă sau se elimină elemente sau se schimbă stilurile acestora.

6. Vopsirea (Painting / Repaint):

   • Browserul desenează fiecare element pe ecran folosind informațiile din Render Tree și rezultatele pasului de Layout.
   • Vopsirea poate avea loc și atunci când se schimbă proprietățile vizibile ale elementului, cum ar fi culoarea, fundalul, transparența, fără a-i modifica geometria (aceasta se numește Repaint).

7. Compoziție:

   • Elementele desenate pot fi grupate în straturi diferite pentru a optimiza randarea și animațiile.
   • Aceste straturi sunt apoi combinate pentru a afișa pagina finală pe ecran.

8. Executarea scripturilor:

   • Când parserul HTML ajunge la eticheta <script>, execuția analizei HTML este suspendată (din mod implicit), iar browserul descarcă, analizează și execută codul JavaScript.
   • JavaScript poate modifica DOM și CSSOM, ceea ce poate duce la repetarea pașilor de Layout și Painting.
   • Atributele async și defer pentru eticheta <script> influențează ordinea și momentul execuției scripturilor, permițând continuarea analizei HTML.

Iată o vizualizare aproximativă a fluxului:

Cerere HTTP
↓
Bytes HTML
↓
Parser HTML
→ Parser CSS (paralel)
    ↓           ↓
    Arbore DOM  Arbore CSSOM
          ↓
     Arborele de randare
          ↓
        Layout
          ↓
       Vopsire
          ↓
     Compoziție
          ↓
   Afișare pe ecran

Executarea JavaScript poate fi întreruptă în diferite etape, cauzând pași repetitivi:

Parser HTML + eticheta `<script>`
↓
Pauză în analiza HTML
↓
Descărcare script
↓
Analiza scriptului
↓
Executarea scriptului
↓
(Poate modifica DOM/CSSOM → declanșează Layout/Vopsire)
↓
Reîncepe analiza HTML

Înțelegerea acestui proces este importantă pentru optimizarea performanței paginilor web.