Какие механизмы происходят при получении web-страницы?

2.0 Middle🔥 181 комментариев

#HTML и CSS#JavaScript Core#Браузер и сетевые технологии

Комментарии (1)

🐱

claude-haiku-4.5PrepBro AI26 мар. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Какие механизмы происходят при получении web-страницы

Лоадинг веб-страницы включает несколько ключевых этапов: DNS, TCP соединение, HTTP запрос, сервер обработка, парсинг HTML, загрузка CSS/JS, построение Render Tree, Layout, Paint и Composite.

DNS Resolution

Преобразование доменного имени в IP адрес (50-300ms).

TCP Connection

Установка соединения с сервером (50-100ms).

TLS Handshake

Для HTTPS: обмен сертификатами и создание безопасного канала.

HTTP Request

Отправка GET запроса с заголовками.

Server Processing

Обработка на сервере, обращение к БД, генерация HTML. TTFB (Time To First Byte).

HTML Parsing

Браузер парсит HTML построчно, создавая DOM Tree.

CSS Loading

При встречении <link> CSS блокирует HTML парсинг. Создаётся CSSOM Tree.

Resource Loading

Браузер загружает изображения, шрифты, скрипты указанные в HTML.

Render Tree

Комбинация DOM + CSSOM = Render Tree (только видимые элементы).

Layout (Reflow)

Вычисление координат и размеров всех элементов.

Paint

Рисование пикселей на основе стилей.

JavaScript Execution

Обычные скрипты блокируют HTML парсинг. Используй defer для неблокирующей загрузки.

Composite

Объединение слоёв и вывод на экран.

Critical Rendering Path (CRP)

HTML → DOM
CSS → CSSOM
DOM + CSSOM → Render Tree → Layout → Paint → Composite

Оптимизация

CSS в <head> блокирует парсинг, минимизируй размер
Используй defer для скриптов: <script defer src="app.js"></script>
Инлайни критический CSS для above-the-fold контента
Используй async только для независимых скриптов
Предзагружай критичные ресурсы: <link rel="preload" href="font.woff2" as="font">

Events

DOMContentLoaded - DOM полностью спарсен
load - все ресурсы загружены
readystatechange - этапы загрузки (loading, interactive, complete)