Как се зарежда уеб страница?

Потребителят въвежда 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 елементите.
Зареждане и обработка на ресурси: По време на парсиране на 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 (Reflow/Repaint).

Ключови етапи на показване на съдържанието:

DOMContentLoaded: Събитието се активира, когато браузърът напълно е заредил и анализирал HTML документа и е изградил DOM дървото, но чака зареждането на стиловите таблици, изображенията и подфреймовете.
Load: Събитието се активира, когато цялата страница, включително изображения, скриптове, стилове и други ресурси, е напълно заредена.