PrepBro
← Назад к вопросам

Почему Flash of Unstyled Content возникает когда все стили собраны в одном файле?

2.2 Middle🔥 161 комментариев
#HTML и CSS

Комментарии (1)

🐱
claude-haiku-4.5PrepBro AI3 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Flash of Unstyled Content (FOUC)

FOUC — это явление, когда страница кратко отображается без стилей перед тем, как CSS загружается. Это создаёт мерцание неоформленного контента.

Почему FOUC возникает

Причина 1: Асинхронная загрузка CSS

Браузер загружает HTML и начинает рендерить контент параллельно с загрузкой CSS:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="/styles.css">
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

Браузер показывает содержимое HTML до того, как CSS полностью загрузится.

Причина 2: Время на загрузку и парсинг CSS

Даже если весь CSS в одном файле, требуется время на:

  1. Загрузку файла — сетевые задержки
  2. Парсинг CSS — браузер анализирует правила
  3. Применение стилей — браузер пересчитывает layout

Во время этого процесса контент остаётся без стилей.

Причина 3: Блокирующее поведение CSS

CSS считается ресурсом, который блокирует рендеринг (render-blocking resource). Браузер ждёт загрузки CSS перед рендерингом.

Решение 1: Критический CSS

Вставь критические стили прямо в HTML:

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: Arial, sans-serif }
    h1 { color: #333; margin: 0 }
    .container { max-width: 1200px }
  </style>
  
  <link rel="stylesheet" href="/styles.css">
</head>
<body>
  <div class="container">
    <h1>Hello World</h1>
  </div>
</body>
</html>

Критический CSS применяется сразу, остальной CSS загружается асинхронно.

Решение 2: Асинхронная загрузка некритического CSS

<head>
  <link rel="stylesheet" href="/styles.css">
  
  <link rel="preload" href="/non-critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="/non-critical.css"></noscript>
</head>

Решение 3: font-display

Если FOUC вызван веб-шрифтами, используй font-display:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap;  /* Показать резервный шрифт, потом подменить */
}

body {
  font-family: 'Inter', Arial, sans-serif;
}

Значения font-display:

  • swap — показать резервный шрифт, потом подменить на веб-шрифт
  • fallback — небольшое время ожидания (100ms), потом резервный
  • optional — если не загружен быстро, использовать резервный

Решение 4: Предварительная загрузка CSS

<head>
  <link rel="preload" href="/styles.css" as="style">
  <link rel="stylesheet" href="/styles.css">
</head>

rel="preload" указывает браузеру загрузить ресурс как можно скорее.

Решение 5: Встроить весь CSS в HTML

Для критически важных стилей можно встроить весь CSS:

<!DOCTYPE html>
<html>
<head>
  <style>
    body { /* стили */ }
    h1 { /* стили */ }
    .container { /* стили */ }
  </style>
</head>

Это эффективно для малых файлов, но не масштабируется.

Решение 6: CSS-in-JS (для SPA)

В Single Page Applications можно использовать CSS-in-JS:

import styled from 'styled-components'

const Title = styled.h1`
  color: #333;
  font-size: 2rem;
`

export function App() {
  return <Title>Hello World</Title>
}

Стили инъектируются вместе с компонентом.

Ключевые точки

  • FOUC возникает из-за времени, требуемого на загрузку и парсинг CSS
  • Критический CSS — встрой основные стили в HTML
  • Асинхронная загрузка — загружай некритический CSS в фоне
  • font-display — управляй поведением веб-шрифтов
  • Preload — подсказывай браузеру загрузить CSS рано

Правильная стратегия загрузки CSS существенно улучшает воспринимаемую производительность.