foundation

Разбор HTML и CSS

Стройте DOM и CSSOM, находите blocking resources и понимайте, как порядок script и stylesheet влияет на рендеринг.

Браузер разбирает HTML в DOM, CSS — в CSSOM, параллельно обнаруживая scripts, stylesheets, шрифты, изображения и preload hints. CSS может блокировать рендеринг: стили нужны до first paint, а parser-blocking scripts останавливают разбор HTML, если не используются defer, async или модульная загрузка.

					<link rel="stylesheet" href="/app.css">
<script defer src="/app.js"></script>

`defer` сохраняет порядок и выполняется после parse; `async` качает параллельно и запускается по готовности. Module scripts по умолчанию отложены. Preload прогревает критичные ресурсы; избыточный preload конкурирует с LCP.

На интервью: свяжите порядок ресурсов с first render, таймингом hydration и почему defer часто безопаснее inline blocking scripts.

Типовые ошибки: preload всего подряд; async scripts выполняются вне порядка и ломают зависимости.

Компромисс: удобство против контроля — выбирайте механизм под вашу связность и бюджет производительности.

Чеклист:

Знайте построение DOM и CSSOM.
Находите render-blocking CSS и scripts.
Режим загрузки script под граф зависимостей.
Измеряйте first render после перестановки.