Kā pārlūkprogramma apstrādā tīmekļa lapu?

Tīmekļa lapas apstrādes process pārlūkprogrammā var tikt sadalīts vairākos posmos:

1. Pieprasījuma un resursa saņemšanas posms:

   • Lietotājs ievada URL adreses joslā vai klikšķina uz saites.
   • Pārlūkprogramma nosūta HTTP pieprasījumu serverim.
   • Servers apstrādā pieprasījumu un nosūta atbildi, kas parasti satur HTML dokumentu.

2. Sintaktiskā analīze (Parsing):

   • Pārlūkprogramma saņem HTML dokumentu baitos.
   • Šie baiti tiek dekodēti uz simboliem saskaņā ar norādīto kodējumu.
   • HTML parsers analizē dokumentu simboliem un veido DOM koku (Document Object Model). DOM attēlo dokumenta loģisko struktūru.
   • Atrodot <link> (CSS) vai <script> (JavaScript) elementus, pārlūkprogramma sāk šo resursu lejupielādi paralēli HTML analīzei.

3. CSSOM veidošana:

   • CSS parsers analizē <style> elementu, <link> elementu un inline stilu CSS noteikumus.
   • Pamatojoties uz šīm noteikumiem, tiek veidots CSSOM koks (CSS Object Model), kas satur visus stilus katram lapas elementam.

4. Render koka veidošana:

   • Render koks apvieno DOM un CSSOM. Tas satur tikai tos elementus, kas tiks attēloti lapā, un to stilus.
   • Elementi ar display: none; CSS noteikumu netiek iekļauti Render kokā.

5. Izvietojums (Layout / Reflow):

   • Pārlūkprogramma aprēķina precīzus ģeometriskos izmērus un katra elementa pozīciju, balstoties uz Render koku. Šo procesu sauc par Layout vai Reflow.
   • Layout notiek pirmajā Render koka veidošanas reizē, kā arī mainoties loga izmēram, pievienojot vai dzēšot elementus, mainot to stilus (piem., izmērus, atstarpes).

6. Zīmēšana (Painting / Repaint):

   • Pārlūkprogramma zīmē katru elementu ekrānā, izmantojot informāciju no Render koka un Layout rezultātiem.
   • Zīmēšana var notikt arī, mainot elementa redzamās īpašības, piemēram, krāsu, fonu, caurspīdīgumu, bez ģeometrisko parametru izmaiņām (to sauc par Repaint).

7. Kompozīcija (Compositing):

   • Zīmējamie elementi var tikt apvienoti dažādos slāņos optimizācijai un animācijai.
   • Šie slāņi tiek apvienoti, lai ekrānā parādītu galīgo lapu.

8. Skriptu izpilde:

   • Kad HTML parsers sasniedz <script> elementu, HTML analīze uz laiku apstājas (pēc noklusējuma), un pārlūkprogramma lejupielādē, analizē un izpilda JavaScript kodu.
   • JavaScript var mainīt DOM un CSSOM, kas var izraisīt jaunu Layout un Painting posmu izpildi.
   • <script> elementa atribūti async un defer ietekmē skriptu izpildes kārtību un laiku, ļaujot turpināt HTML analīzi.

Šeit ir aptuvena procesa vizualizācija:

HTTP pieprasījums
↓
HTML baiti
↓
HTML parsers
→ CSS parsers ( paralēli)
    ↓           ↓
    DOM koks  CSSOM koks
          ↓
     Render koks
          ↓
        Layout
          ↓
       Zīmēšana
          ↓
     Kompozīcija
          ↓
   Ekrāna attēlošana

JavaScript izpilde var iejaukties dažādos posmos, izraisot atkārtotus soļus:

HTML parsers + Script elements
↓
HTML analīzes pauze
↓
Skriptu lejupielāde
↓
Skriptu analīze
↓
Skriptu izpilde
↓
(Var mainīt DOM/CSSOM → izraisīt Layout/Paint)
↓
HTML analīzes turpinājums