Как браузер загружает стили?

Краткий ответ

Браузер загружает стили в несколько этапов:

Загрузка CSS — скачивание файлов стилей 📥
Парсинг — разбор CSS в токены и правила 🔍
CSSOM — построение объектной модели стилей 🌳
Каскад — применение правил по приоритету ⚡
Вычисление — расчёт финальных значений 🧮
Рендеринг — отрисовка элементов 🎨

/* Критические стили загружаются первыми */
<link rel="stylesheet" href="critical.css">
 
/* Некритические можно отложить */
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

Полный ответ

Загрузка стилей — это сложный процесс, который влияет на скорость отображения страницы! Браузер должен не только скачать CSS, но и правильно его обработать. 🚀

Этапы загрузки CSS

1. Обнаружение и загрузка

Браузер находит ссылки на стили и начинает их загрузку:

<!-- Блокирующая загрузка -->
<link rel="stylesheet" href="styles.css">
 
<!-- Предзагрузка -->
<link rel="preload" href="fonts.css" as="style">
 
<!-- Условная загрузка -->
<link rel="stylesheet" href="print.css" media="print">

2. Парсинг CSS

Браузер разбирает CSS на токены и правила:

/* Парсер обрабатывает селекторы */
.header { color: blue; }
#main { font-size: 16px; }
div > p { margin: 10px; }
 
/* И медиа-запросы */
@media (max-width: 768px) {
  .mobile { display: block; }
}

3. Построение CSSOM

Создаётся объектная модель стилей:

/* Иерархия стилей */
body {
  font-family: Arial;
  color: black;
}
 
.container {
  max-width: 1200px;
  margin: 0 auto;
}
 
.header {
  background: #f0f0f0;
  padding: 20px;
}

Критический путь рендеринга

CSS блокирует рендеринг до полной загрузки:

<!-- Блокирует рендеринг -->
<link rel="stylesheet" href="main.css">
 
<!-- Не блокирует для print -->
<link rel="stylesheet" href="print.css" media="print">
 
<!-- Асинхронная загрузка -->
<link rel="preload" href="async.css" as="style" onload="this.rel='stylesheet'">

Каскад и специфичность

Браузер применяет правила по приоритету:

/* Специфичность: 1 */
p { color: black; }
 
/* Специфичность: 10 */
.text { color: blue; }
 
/* Специфичность: 100 */
#content { color: red; }
 
/* Специфичность: 1000 */
p { color: green !important; }

Вычисление значений

Браузер рассчитывает финальные стили:

/* Относительные единицы */
.container {
  width: 80%; /* Вычисляется от родителя */
  font-size: 1.2em; /* Относительно родительского шрифта */
  margin: 2rem; /* Относительно корневого шрифта */
}
 
/* Наследование */
body { font-family: Arial; }
p { /* Наследует font-family */ }

Оптимизация загрузки

Критические стили

Встраивайте важные стили в HTML:

<style>
/* Критические стили для первого экрана */
.header { background: #fff; height: 60px; }
.hero { min-height: 400px; }
</style>
 
<!-- Остальные стили загружаем асинхронно -->
<link rel="preload" href="main.css" as="style" onload="this.rel='stylesheet'">

Минификация и сжатие

/* До минификации */
.button {
  background-color: #007bff;
  border-radius: 4px;
  padding: 8px 16px;
}
 
/* После минификации */
.button{background-color:#007bff;border-radius:4px;padding:8px 16px}

Удаление неиспользуемого CSS

/* Используется */
.header { display: flex; }
.button { padding: 10px; }
 
/* Не используется - можно удалить */
.unused-class { color: red; }
.old-component { margin: 20px; }

Инструменты разработчика

Анализ загрузки в DevTools:

// Измерение времени загрузки CSS
performance.getEntriesByType('resource')
  .filter(entry => entry.name.includes('.css'))
  .forEach(entry => {
    console.log(`${entry.name}: ${entry.duration}ms`);
  });

Лучшие практики

1. Критический CSS

<!-- Встроенные критические стили -->
<style>
.above-fold { /* стили для первого экрана */ }
</style>
 
<!-- Отложенная загрузка остального -->
<noscript><link rel="stylesheet" href="main.css"></noscript>

2. Предзагрузка ресурсов

<!-- Предзагрузка шрифтов -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
 
<!-- Предзагрузка CSS -->
<link rel="preload" href="styles.css" as="style">

3. Условная загрузка

<!-- Только для больших экранов -->
<link rel="stylesheet" href="desktop.css" media="(min-width: 1024px)">
 
<!-- Только для печати -->
<link rel="stylesheet" href="print.css" media="print">

Распространённые ошибки

❌ Неправильно:

<!-- Блокирует рендеринг -->
<link rel="stylesheet" href="large-unused.css">
 
<!-- Много мелких файлов -->
<link rel="stylesheet" href="header.css">
<link rel="stylesheet" href="footer.css">
<link rel="stylesheet" href="sidebar.css">

✅ Правильно:

<!-- Критические стили встроены -->
<style>/* критический CSS */</style>
 
<!-- Объединённые стили -->
<link rel="preload" href="main.css" as="style" onload="this.rel='stylesheet'">

Заключение

Оптимизация загрузки CSS критически важна для производительности:

Встраивайте критические стили
Минифицируйте и сжимайте файлы
Удаляйте неиспользуемый код
Используйте предзагрузку и отложенную загрузку

Правильная загрузка стилей ускоряет отображение страницы! ⚡