73 lines
6.4 KiB
Markdown
73 lines
6.4 KiB
Markdown
---
|
||
sidebar_position: 4
|
||
---
|
||
|
||
# Critical render path
|
||
Источник: DeepSeek
|
||
|
||
Критический путь рендеринга (Critical Rendering Path, CRP) — это последовательность шагов, которые браузер выполняет для преобразования HTML, CSS и JavaScript в пиксели на экране. Оптимизация критического пути рендеринга важна для ускорения загрузки и отображения веб-страниц, что напрямую влияет на пользовательский опыт.
|
||
|
||
## Основные этапы критического пути рендеринга:
|
||
1. **Загрузка HTML:**
|
||
- Браузер загружает HTML-документ и начинает его парсить.
|
||
- Во время парсинга браузер встречает ссылки на внешние ресурсы (CSS, JavaScript, изображения) и начинает их загружать.
|
||
2. **Построение DOM (Document Object Model):**
|
||
- Браузер преобразует HTML в дерево DOM.
|
||
- Каждый HTML-элемент становится узлом в DOM.
|
||
3. **Загрузка CSS:**
|
||
- Браузер загружает CSS-файлы и встроенные стили (`<style>`).
|
||
- CSS парсится и преобразуется в CSSOM (CSS Object Model).
|
||
4. **Построение CSSOM (CSS Object Model):**
|
||
- CSSOM представляет собой дерево стилей, где каждый узел соответствует CSS-правилу.
|
||
- CSSOM используется для определения стилей элементов.
|
||
5. **Создание дерева рендеринга (Render Tree):**
|
||
- Браузер объединяет DOM и CSSOM в дерево рендеринга.
|
||
- Дерево рендеринга содержит только видимые элементы (например, элементы с `display: none` не включаются).
|
||
6. **Компоновка (Layout):**
|
||
- Браузер рассчитывает положение и размеры каждого элемента на странице.
|
||
- Этот процесс также называется **рефлоу (reflow)**.
|
||
7. **Отрисовка (Painting):**
|
||
- Браузер отрисовывает пиксели на экране на основе данных из дерева рендеринга.
|
||
- Этот процесс включает в себя растеризацию (rasterization) и отрисовку слоев.
|
||
8. **Композиция (Composition):**
|
||
- Браузер объединяет слои (например, элементы с `position: fixed` или анимации) для финального отображения.
|
||
|
||
## Как оптимизировать критический путь рендеринга?
|
||
Оптимизация CRP направлена на ускорение загрузки и отображения контента, особенно "выше сгиба" (above the fold). Основные подходы:
|
||
|
||
1. **Минимизация размера файлов:**
|
||
- Сжимайте HTML, CSS и JavaScript (например, с помощью Gzip или Brotli).
|
||
- Удаляйте лишние пробелы, комментарии и неиспользуемый код.
|
||
2. **Уменьшение количества ресурсов:**
|
||
- Объединяйте CSS и JavaScript-файлы.
|
||
- Используйте встроенные стили для критического CSS (Critical CSS).
|
||
3. **Оптимизация загрузки CSS:**
|
||
- Разделяйте CSS на критический и некритический.
|
||
- Используйте `media`-атрибуты для загрузки только необходимых стилей:
|
||
4. **Оптимизация загрузки JavaScript:**
|
||
- Используйте атрибуты async или defer для загрузки скриптов без блокировки рендеринга:
|
||
- Переносите скрипты в конец документа (перед закрывающим тегом `</body>`).
|
||
5. **Приоритизация загрузки ресурсов:**
|
||
- Используйте `<link rel="preload">` для приоритетной загрузки критических ресурсов:
|
||
6. **Оптимизация изображений:**
|
||
- Используйте современные форматы (WebP, AVIF).
|
||
- Сжимайте изображения и используйте `srcset` для адаптивной загрузки.
|
||
7. **Минимизация количества рефлоу и репинтов:**
|
||
- Избегайте изменения стилей, которые вызывают рефлоу (например, `width`, `height`, `margin`).
|
||
- Используйте `transform` и `opacity` для анимаций, так как они не вызывают рефлоу.
|
||
8. **Использование кеширования:**
|
||
- Настройте кеширование статических ресурсов (CSS, JS, изображения) на стороне сервера.
|
||
|
||
## Пример оптимизации CRP:
|
||
1. **Критический CSS:**
|
||
- Встраивайте стили, необходимые для отображения контента "выше", прямо в HTML
|
||
2. **Асинхронная загрузка скриптов:**
|
||
- Используйте async или defer для загрузки JavaScript
|
||
3. **Предзагрузка шрифтов:**
|
||
- Загружайте шрифты заранее, чтобы избежать задержек
|
||
|
||
## Почему это важно?
|
||
- **Ускорение загрузки:** Оптимизация CRP уменьшает время до первого отображения контента (First Contentful Paint, FCP).
|
||
- **Улучшение пользовательского опыта:** Быстрая загрузка страницы повышает удовлетворенность пользователей.
|
||
- **SEO:** Скорость загрузки страницы влияет на ранжирование в поисковых системах.
|