- Пользователь вводит URL в адресную строку браузера или кликает по ссылке.
- Парсинг URL: Браузер разбирает URL для определения протокола, домена, порта и пути.
- Поиск IP-адреса: Браузер проверяет кеш DNS, затем кеш операционной системы, затем кеш роутера. Если адрес не найден локально, отправляется запрос к DNS-серверу для получения IP-адреса доменного имени.
- Установление TCP-соединения (Handshake): Браузер устанавливает TCP-соединение с сервером по полученному IP-адресу (трехстороннее рукопожатие: SYN -> SYN-ACK -> ACK).
- Отправка HTTP-запроса: Браузер отправляет HTTP-запрос (обычно GET) на сервер с указанием требуемого ресурса (путь), заголовков (User-Agent, Accept-Encoding, Cookie и т.д.) и тела запроса (если есть).
http
- Обработка запроса сервером: Сервер получает запрос, обрабатывает его (например, выполняет скрипты на стороне сервера) и формирует HTTP-ответ.
- Отправка HTTP-ответа: Сервер отправляет HTTP-ответ обратно браузеру. Ответ включает статус-код (например, 200 OK), заголовки (Content-Type, Content-Length, Cache-Control и т.д.) и тело ответа (содержимое запрошенного ресурса, например, HTML-файл).
http
- Парсинг 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: Событие срабатывает, когда вся страница, включая изображения, скрипты, стили и другие ресурсы, полностью загружена.