SYSTEM ATLASЗагрузка материала

Critical Rendering Path

Critical Rendering Path

Ресурсы CSS, DOM и JavaScript определяют путь до первого отображения.

Простыми словами

Например, пользователь открывает страницу магазина на телефоне, а браузер должен получить HTML, стили, скрипты и данные через сеть. Поэтому проверяют весь путь запроса от браузера до сервера и обратно - иначе локально правильное решение может ухудшить загрузку, совместимость или устойчивость страницы.

Механизм действия

Сначала проверяют, есть ли исходное условие из определения. Затем смотрят, как оно влияет на структуру компонентов, потоки данных, ограничения и действия участников. Если эту связь не удаётся наблюдать, принцип не стоит использовать как готовое объяснение.

Пример в работе

Нерабочий подход

Решение принимают без учета механизма «Critical Rendering Path», оценивая только ближайший эффект.

Системный подход

Перед изменением проверяют, как «Critical Rendering Path» влияет на ограничения, стимулы, зависимости и вторичные последствия.

Ограничения

«Critical Rendering Path» объясняет только часть происходящего в области «Веб-архитектура». Сам принцип не говорит, насколько сильным будет эффект в вашем случае, и не заменяет измерения. При другом масштабе, среде или временном горизонте результат может отличаться.

Источник

Ilya Grigorik. Constructing the Object Model (2014; updated).

Первоисточник