React Frontend Developer

Question 1

Что такое Critical CSS и как он используется?

Accepted Answer

Critical CSS — это минимальный набор стилей для первого экрана.
Он встраивается прямо в HTML.
Это позволяет браузеру быстрее начать рендер.
Остальные стили загружаются асинхронно.

Question 2

Что такое Critical Rendering Path и из каких основных этапов он состоит?

Accepted Answer

Critical Rendering Path — это последовательность шагов, которые браузер выполняет для преобразования HTML, CSS и JavaScript в пиксели на экране. Основные этапы: построение DOM, построение CSSOM, создание дерева рендеринга, layout (расчёт геометрии) и paint (отрисовка). Понимание этого пути помогает оптимизировать загрузку и ускорить отображение страницы.

Question 3

Какие блокирующие операции есть в рамках Critical Rendering Path?

Accepted Answer

Блокирующие операции в Critical Rendering Path — это ресурсы, которые останавливают построение DOM или CSSOM. К ним относятся CSS-файлы (блокируют рендеринг) и синхронные JavaScript-скрипты (блокируют парсинг HTML). Они задерживают первую отрисовку страницы, поэтому их оптимизируют: минифицируют, объединяют, используют async/defer.

Вопросы React Frontend Developer