როგორ იტვირთება ვებგვერდი?

მომხმარებელი вводит URL-адрес в адресную строку браузера или нажимает на ссылку.
URL-ის ანალიზი: ბრაუზერი ანალიზებს URL-ს იმისათვის, რათა განსაზღვროს პროტოკოლი, დომენი, პორტი და გზა.
IP მისამართის მოძიება: ბრაუზერი ამოწმებს DNS-კეშს, შემდეგ ოპერაციული სისტემის კეშს, შემდეგ როუტერის კეშს. თუ მისამართი არ მოიძებნება ადგილობრივად, გამოდის მოთხოვნა DNS-სერვერზე დომენის სახელის IP მისამართის მისაღებად.
TCP კავშირის დამყარება (Handshake): ბრაუზერი ადგენს TCP კავშირს სერვერთან მიღებული IP-მისამართით (სამმხრივი ხელის მოწერა: SYN -> SYN-ACK -> ACK).
HTTP მოთხოვნის გაგზავნა: ბრაუზერი აგზავნის HTTP მოთხოვნას (საშუალოდ GET) სერვერზე მოთხოვნად რესურსთან (გზა), სათაურებთან (User-Agent, Accept-Encoding, Cookie და ა.შ.) და მოთხოვნის სხეულთან (თუ არის).
```
GET /index.html HTTP/1.1  
Host: example.com  
User-Agent: Mozilla/5.0 ...  
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8  
```
მოთხოვნის დამუშავება სერვერზე: სერვერი იღებს მოთხოვნას, აძლიერებს მას (მაგალითად, სერვერზე სკრიპტების შესრულება) და ქმნის HTTP პასუხს.
HTTP პასუხის გაგზავნა: სერვერი აბრუნებს HTTP პასუხს ბრაუზერს. პასუხი შეიცავს სტატუს-კოდს (მაგალითად, 200 OK), სათაურებს (Content-Type, Content-Length, Cache-Control და ა.შ.) და პასუხის სხეულს (მოთხოვნილი რესურსის შინაარსი, მაგალითად HTML ფაილი).
```
HTTP/1.1 200 OK  
Content-Type: text/html; charset=UTF-8  
Content-Length: 12345  
Cache-Control: max-age=3600  

<!DOCTYPE html>  
<html>  
<head>...</head>  
<body>...</body>  
</html>  
```
HTML-ის ანალიზი და DOM-ის შექმნა: ბრაუზერი იწყებს HTML კოდის მიღებას და ანალიზს, ქმნის დოკუმენტის ობიექტურ მოდელს (DOM - Document Object Model) მეხსიერებაში. DOM წარმოადგენს HTML ელემენტების ხე-სtructure-ს.
რესურსების ჩატვირთვა და დამუშავება: HTML-ის ანალიზის დროს ბრაუზერი ხვდება სხვა რესურსებზე (CSS, JavaScript, სურათები, ფონტები და ა.შ.) ბმულებს. თითოეულ რესურსზე ხორციელდება ნაბიჯები 3-7 (IP მოძიება, TCP კავშირი, HTTP მოთხოვნა/პასუხი). ამ რესურსების ჩატვირთვა შეიძლება მოხდეს პარალელურად (შეზღუდული რაოდენობით ერთდროულ კავშირებზე).
CSSOM-ის შექმნა: ბრაუზერი ანალიზებს CSS ფაილებს და <style> ბლოკებს HTML-ში, ქმნის CSS ობიექტურ მოდელს (CSSOM - CSS Object Model). CSSOM წარმოადგენს სტილებს, რომლებიც ვრცელდება გვერდზე.
Render Tree-ის შექმნა: ბრაუზერი აერთიანებს DOM და CSSOM-ს, რათა შექმნას რენდერინგის ხე (Render Tree). Render Tree შეიცავს მხოლოდ ხილვად ელემენტებს და მათ სტილებს. ელემენტები display: none არ შედის.
Layout (Reflow): ბრაუზერი ადგენს თითოეული ელემენტის ზუსტ პოზიციასა და ზომებს ლეაუტზე, დაფუძნებული Render Tree-ს, ხედი ეკრანის ზომებს და სტილებს.
Painting (Repaint): ბრაუზერი ხატავს თითოეულ ელემენტს ეკრანზე განსაზღვრულ პოზიციებზე და სტილებით. ეს ხდება ფენებზე.
კომპოზიცია: ბრაუზერი აერთიანებს მოხატულ ფენებს საბოლოო გამოსახულებაში, რომელიც გამოჩნდება მომხმარებლის ეკრანზე.
JavaScript-ის შესრულება: სკრიპტების ჩატვირთვის და ანალიზის დროს, JavaScript კოდი შესრულდება. JavaScript-ის შესრულება შეიძლება გავლენას ახდენდეს DOM და CSSOM-ზე, გამოიწვიოს ახალი ნაბიჯები Layout და Painting-ის (Relayout/Repaint).