Что происходит после получения браузером HTML-страницы?

2.3 Middle🔥 201 комментариев

#HTML и CSS

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

🐱

deepseek-v3.2PrepBro AI6 апр. 2026 г.(ред.)

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

Процесс обработки HTML-страницы браузером

Когда браузер получает HTML-страницу, запускается сложный многоэтапный процесс, который можно разделить на несколько ключевых стадий. Этот процесс называется Critical Rendering Path (критический путь рендеринга).

1. Парсинг HTML и построение DOM

Браузер начинает последовательно читать полученные байты HTML и преобразовывать их в Document Object Model (DOM) — древовидную структуру, представляющую HTML-документ.

<!DOCTYPE html>
<html>
<head>
    <title>Пример</title>
</head>
<body>
    <div class="container">
        <h1>Заголовок</h1>
    </div>
</body>
</html>

// Результирующая DOM-структура будет иметь вид дерева:
// document
// ├── html
// │   ├── head
// │   │   └── title
// │   └── body
// │       └── div.container
// │           └── h1

Важные аспекты этого этапа:

Парсинг может быть приостановлен при встрече тегов <script> без атрибутов async или defer
Внешние ресурсы (CSS, изображения) начинают загружаться параллельно
Браузер обрабатывает HTML последовательно, от начала к концу

2. Парсинг CSS и построение CSSOM

Одновременно с построением DOM браузер анализирует CSS (встроенные стили, внешние файлы) и создает CSS Object Model (CSSOM) — дерево стилей с учетом каскада и специфичности.

body {
    font-size: 16px;
}

.container {
    width: 100%;
    max-width: 1200px;
}

h1 {
    color: #333;
    font-size: 2em; /* Рассчитается как 32px */
}

3. Формирование Render Tree

На этом этапе DOM и CSSOM объединяются в Render Tree (дерево рендеринга), которое содержит только видимые элементы с их рассчитанными стилями.

Что исключается из Render Tree:

Элементы с display: none
Скрытые элементы (visibility: hidden остаются)
Теги <head>, <meta>, <script> (если не отображаются)

4. Layout (Reflow) — расчет геометрии

Браузер вычисляет точное положение и размеры каждого элемента в Render Tree. Этот процесс также называется reflow.

// Пример того, что рассчитывается для каждого элемента:
// - Позиция (x, y координаты)
// - Размеры (ширина, высота)
// - Внешние и внутренние отступы
// - Границы

Факторы, влияющие на Layout:

Размеры и отступы элементов
Позиционирование (static, relative, absolute, fixed)
Flexbox и Grid раскладки
Размеры viewport

5. Painting — отрисовка пикселей

После расчета геометрии начинается процесс painting, где браузер:

Заполняет пиксели цветами фона, границ, текста
Обрабатывает визуальные эффекты (тени, градиенты)
Работает с изображениями и SVG

// Последовательность отрисовки обычно:
// 1. Фон элемента
// 2. Границы
// 3. Текст и изображения
// 4. Дочерние элементы

6. Compositing — компоновка слоев

Современные браузеры используют аппаратное ускорение и разбивают страницу на слои:

Элементы с transform: translateZ(0) или will-change создают отдельные слои
Каждый слой rasterized (растеризуется) отдельно
Композитор объединяет слои в финальное изображение

Оптимизации и особенности процесса

Блокирующие ресурсы:

Скрипты без async/defer блокируют парсинг HTML
CSS блокирует рендеринг, но не парсинг HTML

Асинхронная загрузка:

<!-- Не блокирует парсинг HTML -->
<script async src="script.js"></script>
<script defer src="script.js"></script>

<!-- Предзагрузка критических ресурсов -->
<link rel="preload" href="critical.css" as="style">

Event Loop и отложенные задачи:

После первоначального рендеринга браузер обрабатывает события
Изменения DOM/CSS запускают повторный reflow/repaint
requestAnimationFrame синхронизирует анимации с кадрами браузера

Производительность и метрики

Key Performance Metrics:

FCP (First Contentful Paint) — первое отображение контента
LCP (Largest Contentful Paint) — отрисовка самого большого элемента
CLS (Cumulative Layout Shift) — накопленное смещение布局
TTI (Time to Interactive) — время до полной интерактивности

Оптимизационные стратегии:

Минификация и сжатие ресурсов
Ленивая загрузка изображений (loading="lazy")
Критический CSS inline, остальной — асинхронно
Использование content-visibility для отложенного рендеринга

Весь этот сложный процесс происходит за миллисекунды, но понимание его этапов позволяет разработчикам создавать быстрые и отзывчивые веб-приложения, оптимизируя каждый этап критического пути рендеринга.