Skip to main content

Що таке критичний шлях рендерингу (critical rendering path)?

Frontend-інструментиJunior~1 хв читання
Запропонувати правку

Критичний шлях рендерингу (Critical Rendering Path) - це послідовність кроків, які браузер проходить, щоб перетворити HTML, CSS і JS на пікселі на екрані.

Він включає все, що потрібно для першого відображення сторінки, і саме від нього залежить, як швидко користувач побачить хоч щось.

Порядок кроків

  1. Завантаження HTML Браузер починає завантажувати HTML-документ.
  2. Побудова DOM HTML парситься у дерево об'єктів (Document Object Model).
  3. Завантаження і парсинг CSS Усі CSS-файли теж завантажуються і перетворюються на CSSOM (CSS Object Model). Поки не завантажений CSS, рендер зупиняється.
  4. Створення рендер-дерева DOM + CSSOM об'єднуються в дерево візуальних об'єктів.
  5. Layout (або Reflow) Обчислюються розміри і позиції всіх елементів.
  6. Paint Кожному вузлу призначається візуальне представлення: колір, шрифт, фон тощо.
  7. Composite Все збирається у кадр і надсилається на екран.

Чому це важливо

  • Все, що блокує ці кроки (великі CSS, синхронний JS, шрифти), уповільнює перший рендер.
  • Оптимізація критичного шляху означає мінімізувати час до першого корисного контенту (FCP, LCP).

Висновок

Критичний шлях рендерингу - це ланцюжок від отримання HTML до першого видимого пікселя. Чим коротший і простіший цей ланцюг, тим швидше сайт «оживає».

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку