როგორ მუშაობს ბრაუზერი ვებგვერდზე?

ვებგვერდის დამუშავების პროცესი ბრაუზერში შეიძლება დაიყოს რამდენიმე ეტაპად:

1. მოთხოვნა და რესურსის მიღება:

   • მომხმარებელი აკლიკებს URL-ს მისამართის ზოლში ან აკლიკებს ლინკზე.
   • ბრაუზერი აგზავნის HTTP-საკითხს სერვერზე.
   • სერვერი პროცესავს მოთხოვნას და აგზავნის პასუხს, რომელიც ჩვეულებრივ შეიცავს HTML დოკუმენტს.

2. სინტაქსის ანალიზი (Parsing):

   • ბრაუზერი იღებს HTML დოკუმენტს ბაიტების სახით.
   • ამ ბაიტებს დეკოდირებს სიმბოლოებად მითითებული კოდირების შესაბამისად.
   • HTML პარსერი ანალიზს ახორციელებს სიმბოლოს მიხედვით და აშენებს DOM ხეს (Document Object Model). DOM წარმოადგენს დოკუმენტის ლოგიკურ სტრუქტურას.
   • როდესაც იპოვის <link> (CSS-ისთვის) ან <script> (JavaScript-ისთვის) ტეგებს, ბრაუზერი იწყებს ამ რესურსების ჩამოტვირთვას პარალელურად HTML-ის პარსინგთან.

3. CSSOM-ის შექმნა:

   • CSS პარსერი ანალიზს ახორციელებს <style> ტეგების, <link> ტეგების და ინლაინ სტილების CSS წესებს.
   • ამ წესების საფუძველზე აშენებს CSSOM ხეს (CSS Object Model), რომელიც შეიცავს ყველა სტილს თითოეულ ელემენტზე გვერდზე.

4. რენდერინგის ხის (Render Tree) შექმნა:

   • Render Tree აერთიანებს DOM და CSSOM-ს. ის შეიცავს მხოლოდ იმ ელემენტებს, რომლებიც გამოჩნდება გვერდზე, და მათთან შესაბამის სტილებს.
   • ელემენტები, რომლებსაც CSS წესით display: none; არის დაყენებული, არ შედიან Render Tree-ში.

5. მეტრიკა (Layout / Reflow):

   • ბრაუზერი ითვლის თითოეული ელემენტის ზუსტ გეომეტრიულ ზომებს და პოზიციას Render Tree-ზე დაყრდნობით. ამ პროცესს უწოდებენ Layout ან Reflow.
   • Layout ხორციელდება პირველჯერადი Render Tree-ის შექმნისას, ასევე შეცვლების დროს, როგორიცაა ფანჯრის ზომის შეცვლა, ელემენტების დამატება/წაშლა, სტილების ცვლილება (მაგ., ზომები, შუალედები).

6. ფერადვა (Painting / Repaint):

   • ბრაუზერი ხატავს თითოეულ ელემენტს ეკრანზე, გამოყენებით Render Tree-ის ინფორმაცია და Layout-ის შედეგები.
   • Painting-ი ასევე შეიძლება მოხდეს ელემენტის ხილვადობის თვისებების ცვლილებისას, როგორიცაა ფერი, ფონზე, გამჭვირვალობა, ისე რომ მისი გეომეტრია არ შეიცვალოს (ეს Repaint-ია).

7. კომპოზიცია (Compositing):

   • ხატვადი ელემენტები შეიძლება გაერთიანდნენ სხვადასხვა ფენებზე ოპტიმიზაციისთვის და ანიმაციისთვის.
   • ამ ფენები შემდეგი ერთიანობით აჩვენებენ საბოლოო გვერდს ეკრანზე.

8. სკრიპტების შესრულება:

   • როდესაც HTML პარსერი აღწევს <script> ტეგს, HTML-ის პარსინგი დროებით შეჩერდება (ნაგულისხმევი), და ბრაუზერი ჩამოტვირთავს, პარსავს და ასრულებს JavaScript კოდს.
   • JavaScript-ი შეიძლება შეცვალოს DOM და CSSOM, რაც გამოიწვევს ახალი Layout და Painting ნაბიჯების შესრულებას.
   • <script> ტეგისთვის async და defer ატრიბუტები გავლენას ახდენენ სკრიპტების შესრულების წესზე და დროს, საშუალებას აძლევენ HTML-ის პარსინგის გაგრძელებას.

აქ არის მიმოხილული ვიზუალიზაცია პროცესის:

HTTP მოთხოვნა
↓
HTML ბაიტები
↓
HTML პარსერი
→ CSS პარსერი (პარალელურად)
    ↓           ↓
    DOM ხე  CSSOM ხე
          ↓
     Render ხე
          ↓
        Layout
          ↓
       ფერადვა
          ↓
     კომპოზიცია
          ↓
   ეკრანის ჩვენება

JavaScript-ის შესრულება შეიძლება ჩაერიოს სხვადასხვა ეტაპზე, გამოიწვიოს ახალი ნაბიჯების შესრულება:

HTML პარსერი + სკრიპტის ტეგი
↓
HTML პარსინგის შეჩერება
↓
სკრიპტის ჩამოტვირთვა
↓
სკრიპტის პარსინგი
↓
სკრიპტის შესრულება
↓
(შესაძლოა შეცვალოს DOM/CSSOM → გამოიწვიოს Layout/Paint)
↓
HTML პარსინგის განახლება