Ответ
Браузер отрисовывает сайт в несколько этапов:
- Парсинг HTML - строится DOM-дерево
- Парсинг CSS - формируется CSSOM (объектная модель CSS)
- Построение Render Tree - комбинация DOM и CSSOM
- Layout (Reflow) - вычисление позиций и размеров элементов
- Paint - отрисовка пикселей на экране
- Composite - композиция слоев (если есть аппаратное ускорение)
Пример критического пути рендеринга:
<html>
<head>
<link rel="stylesheet" href="style.css"> <!-- Блокирующий ресурс -->
</head>
<body>
<p>Hello World</p>
<script src="app.js"></script> <!-- Блокирует парсинг HTML -->
</body>
</html>Оптимизации:
- Размещать CSS в head
- Откладывать неключевые JS (async/defer)
- Минимизировать пересчеты стилей и макета