Какие знаешь критические этапы рендеринга

Тип вопроса: HTML Вероятность: 10% Категория: Frontend Разработчик

Ответ

Критические этапы рендеринга (Critical Rendering Path) — это последовательность шагов, которые браузер выполняет для преобразования HTML, CSS и JavaScript в пиксели на экране. Оптимизация CRP напрямую влияет на скорость загрузки страницы.

  1. DOM (Document Object Model) — парсинг HTML и построение дерева DOM.
  2. CSSOM (CSS Object Model) — парсинг CSS и построение дерева стилей.
  3. Render Tree — объединение DOM и CSSOM в дерево рендеринга (исключает невидимые элементы).
  4. Layout (Reflow) — расчёт позиций и размеров элементов.
  5. Paint — отрисовка пикселей (растеризация).
  6. Composite — объединение слоёв (если используется GPU-ускорение).

Пример оптимизации:

<!-- Подключаем CSS в <head> для раннего построения CSSOM -->  
<link rel="stylesheet" href="styles.css">  
<!-- JS с атрибутом defer/async, чтобы не блокировать парсинг -->  
<script defer src="app.js"></script>

Важно:

  • CSS блокирует рендеринг, поэтому его нужно загружать как можно раньше.
  • JS блокирует парсинг HTML (если нет async/defer), поэтому его лучше размещать перед закрывающим </body>.
  • Избегайте синхронных стилей (@import) и инлайновых скриптов без необходимости.

Ответ 18+ 🔞

А, слушай, вот тебе на пальцах про эту самую "критическую цепочку рендеринга", чтобы не ебал мозг. Это ж когда браузер твою страничку из кучи букв и скриптов в картинку на экране превращает. И если эту цепочку не оптимизировать, то страница будет грузиться, как последняя тварь, пока ты с ума не сойдёшь.

Вот смотри, как он, сука, работает, по шагам:

  1. DOM (Эта ёбаная структура документа). Берёт твой HTML и начинает строить из него дерево, как ёлка, где все теги — это ветки. Пока всё не распарсит, дальше ни хуя не двигается.
  2. CSSOM (А это дерево стилей, блядь). Параллельно, сука, или нет — сцуко, он ещё и CSS твой жуёт. Собирает все стили в свою отдельную, хитрожопую структуру. И вот тут засада: если CSS через @import подгружается или в конце тела валяется, то всё, пиши пропало, он будет тормозить всё нахуй.
  3. Render Tree (Дерево рендеринга). А вот тут он, хитрая жопа, скрещивает эти два дерева — DOM и CSSOM. И выкидывает всё, что нахуй не нужно (типа display: none). Получается чистый план, ЧТО и КАК рисовать.
  4. Layout, он же Reflow (Расчёт макета). Начинается магия, ёпта! Браузер вычисляет, где какая хуйня (пардон, элемент) должна стоять, какого она размера. Представь, ты расставляешь мебель в комнате. Любое изменение геометрии (размеры, шрифты) — и по новой, пересчёт, блядь!
  5. Paint (Непосредственно отрисовка). Всё, хуяк — и по этому плану начинается раскраска. Текст, картинки, границы — всё превращается в пиксели. Самый жирный этап, если элементов — овердохуища.
  6. Composite (Компоновка). Финальный аккорд, если у тебя там анимации на GPU или элементы в отдельных слоях. Он всё это добро накладывает друг на друга и выводит на экран. Красота, бля!

А теперь, сука, как не накосячить? Пример в студию:

<!-- CSS засовываем в самый верх, в <head>, чтобы он начал жраться сразу, а не в конце, как дурак -->
<link rel="stylesheet" href="styles.css">

<!-- А вот JS — это отдельная песня. Ставим ему defer, чтобы он не блокировал парсинг HTML, как корова языком. Пусть ждёт своего часа, мудло. -->
<script defer src="app.js"></script>

Главные мысли, чтобы не облажаться:

  • CSS — это блокирующая хуйня для рендеринга. Качай его первым делом, в самое начало, чтобы дерево стилей построилось быстро.
  • JS по умолчанию — вообще пидарас. Он останавливает весь парсинг HTML, пока сам не выполнится. Поэтому либо кидай его в конец тела (</body>), либо используй async/defer, как умный человек.
  • Избегай, блядь, синхронных импортов стилей (@import) и кучи инлайновых скриптов в середине документа. Они всё разъебывают, всю тщательно выстроенную очередь. В рот меня чих-пых!

Вот и вся наука. Оптимизируешь это — и страницы будут летать, а пользователи не успеют послать тебя нахуй.

© ХакСобесов, 2026
support@hacksobesov.com