Name: Sobes.tech
Rating: 4.9 (250 reviews)

Пользователь вводит 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): Браузер рисует каждый элемент на экране в рассчитанных позициях и с примененными стилями. Это происходит на слоях.
Composite: Браузер объединяет нарисованные слои в конечное изображение, которое отображается на экране пользователя.
Выполнение JavaScript: По мере загрузки и парсинга скриптов, JavaScript-код выполняется. Выполнение JavaScript может влиять на DOM и CSSOM, вызывая повторные шаги Layout и Painting (Relayout/Repaint).

Ключевые этапы отображения контента:

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

Как происходит загрузка веб-страницы?