Hogyan dolgozza fel a böngésző a weboldalt?

Egy weboldal böngésző általi feldolgozási folyamata több szakaszra osztható:

1. Kérés és erőforrás fogadása:

   • A felhasználó beírja az URL-t a címsorba vagy kattint egy hivatkozásra.
   • A böngésző HTTP-kérést küld a szervernek.
   • A szerver feldolgozza a kérést és általában egy HTML dokumentumot tartalmazó választ küld.

2. Szintaktikai elemzés (Parsing):

   • A böngésző megkapja a HTML dokumentumot bájtok formájában.
   • Ezek a bájtok a megadott kódolás szerint dekódolódnak karakterekké.
   • A HTML parser karakterről karakterre elemzi a dokumentumot és létrehozza a DOM (Document Object Model) fát. A DOM a dokumentum logikai szerkezetét ábrázolja.
   • Amikor <link> (CSS-hez) vagy <script> (JavaScript-hez) tageket talál, a böngésző ezek erőforrásainak letöltését párhuzamosan kezdi a HTML elemzéssel.

3. CSSOM építése:

   • A CSS parser elemzi a <style> tagekből, <link> tagekből és inline stílusokból származó CSS szabályokat.
   • Ezek alapján épül fel a CSS Object Model (CSSOM) fa, amely tartalmazza az összes stílust az oldal minden elemére.

4. Render fa építése:

   • A Render Tree összekapcsolja a DOM-ot és a CSSOM-ot. Csak azokat az elemeket tartalmazza, amelyek megjelennek az oldalon, és azok stílusait.
   • A display: none; CSS szabályt tartalmazó elemek nem kerülnek be a Render Tree-be.

5. Elrendezés (Layout / Reflow):

   • A böngésző kiszámítja minden elem pontos geometriai méreteit és helyzetét a Render Tree alapján. Ezt a folyamatot hívják Layout vagy Reflow-nak.
   • A Layout az első Render Tree építéskor történik, valamint abban az esetben, ha az ablak mérete változik, elemeket adnak hozzá vagy távolítanak el, vagy stílusokat módosítanak.

6. Festés (Painting / Repaint):

   • A böngésző minden elemet kirajzol a képernyőre, a Render Tree és a Layout eredményei alapján.
   • A festés akkor is megtörténhet, ha az elem látható tulajdonságai, például a szín, háttér, átlátszóság változnak, anélkül, hogy a geometria módosulna (ezt Repaint-nek hívják).

7. Kompozíció:

   • A megrajzolt elemek különböző rétegekre oszthatók a rajzolás és animációk optimalizálása érdekében.
   • Ezeket a rétegeket végül összefűzik, hogy megjelenjen a végső oldal a képernyőn.

8. Szkriptek végrehajtása:

   • Amikor a HTML parser eléri a <script> taget, a HTML elemzés szünetel (alapértelmezés szerint), és a böngésző letölti, elemzi és végrehajtja a JavaScript kódot.
   • A JavaScript módosíthatja a DOM-ot és a CSSOM-ot, ami újra Layout és Festés lépéseket vált ki.
   • A <script> tag async és defer attribútumai befolyásolják a szkriptek végrehajtási sorrendjét és idejét, lehetővé téve a HTML elemzés folytatását.

Az alábbiakban egy tipikus folyamatábra látható:

HTTP kérés
↓
HTML bájtok
↓
HTML parser
→ CSS parser (párhuzamos)
    ↓           ↓
    DOM fa  CSSOM fa
          ↓
     Render fa
          ↓
        Layout
          ↓
       Festés
          ↓
     Kompozíció
          ↓
   Képernyő

A JavaScript végrehajtása különböző szakaszokban szünetelhet, újraindítva a lépéseket:

HTML parser + `<script>` tag
↓
HTML elemzés szünetel
↓
Script letöltése
↓
Script elemzése
↓
Script végrehajtása
↓
(Lehetséges DOM/CSSOM módosítás → Layout/Festés újra)
↓
HTML elemzés folytatása

Ennek a folyamatnak az megértése fontos a weboldalak teljesítményének optimalizálásához.