В какой последовательности отображается HTML страница с CSS стилями и JavaScript

2.0 Middle🔥 121 комментариев

#HTML и CSS

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

🐱

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

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

Последовательность отображения HTML, CSS и JavaScript в браузере

Это критически важный вопрос для понимания оптимизации производительности и пользовательского опыта. Браузер выполняет сложный процесс parsing, rendering и execution в определенном порядке.

1. HTML Parsing (Парсинг HTML)

Браузер начинает парсить HTML документ сверху вниз, строка за строкой:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Page</title>
    <!-- CSS загружается в head -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- HTML парсится здесь -->
    <h1>Hello</h1>
    <!-- JavaScript загружается в конце body -->
    <script src="app.js"></script>
</body>
</html>

2. CSS загрузка и парсинг

Когда браузер встречает <link rel="stylesheet">:

Загрузка — браузер отправляет HTTP запрос на получение CSS файла
Парсинг — CSS парсится параллельно с HTML парсингом
CSSOM построение — браузер создает CSS Object Model (подобно DOM)
Блокировка рендеринга — CSS блокирует рендеринг до полной загрузки

HTML Parser:  [=====HTML=====>][====HTML=====>][====HTML=====>]
              |
CSS Fetch:    [===CSS Request===] [CSS parsing...]
              |
Render:       [Waiting for CSS...][RENDER TREE][Paint]

Важно: CSS является render-blocking resource. Страница не будет отображена, пока CSS не загружена и не спарсена.

3. CSSOM и Render Tree

После того как HTML парсен (создан DOM) и CSS загружен (создан CSSOM), браузер объединяет их в Render Tree:

DOM (из HTML)          +    CSSOM (из CSS)     =    Render Tree

html                        body { margin: 0 }
head                        h1 { color: blue }
body                        .hidden { display: none }
  h1 "Hello"
  p "Text"                  (только видимые элементы)
  div.hidden

                             Render Tree:
                             html
                               body (margin: 0)
                                 h1 (color: blue)
                                 p
                             (div.hidden пропущен)

4. Layout (Макетирование)

После создания Render Tree браузер вычисляет размеры и позиции элементов:

// Этап Layout для элемента
{
  x: 10,
  y: 20,
  width: 300,
  height: 100,
  display: "block",
  color: "blue"
}

Этот процесс называется reflow. Изменение размера, позиции или видимости элемента запускает reflow.

5. Paint (Закрашивание)

Браузер преобразует Render Tree в пиксели на экране:

Render Tree → Layout → Paint → Composite

[Вычисляем позиции] → [Рисуем пиксели] → [Комбинируем слои]

6. JavaScript загрузка и выполнение

JavaScript является blocking resource! Когда браузер встречает <script>, он:

Останавливает парсинг HTML (если это обычный скрипт)
Загружает скрипт (если он внешний файл)
Парсит JavaScript
Выполняет JavaScript
Резюмирует парсинг HTML

<!DOCTYPE html>
<head>
    <script src="critical.js"></script>  <!-- Парсинг HTML блокирован! -->
</head>
<body>
    <h1>Hello</h1>  <!-- Парсится только после выполнения JS -->
</body>

Полная последовательность

1. Браузер получает HTML
   ↓
2. Парсинг <head>
   ├─ Загрузка CSS → CSSOM
   └─ Загрузка JS (в <head>) → Выполнение (блокирует парсинг!)
   ↓
3. Парсинг <body>
   ├─ DOM построен
   ├─ Парсинг документа продолжается
   └─ <script> в конце <body> → Загрузка → Выполнение
   ↓
4. Все CSS загружено? Да → CSSOM готов
   ↓
5. Построение Render Tree (DOM + CSSOM)
   ↓
6. Layout (вычисление координат)
   ↓
7. Paint (рисование пиксели)
   ↓
8. Composite (комбинирование слоев)
   ↓
9. Первый видимый контент на экране (First Contentful Paint)

Практические примеры оптимизации

ПЛОХО: CSS в <body> и JS в <head>

<head>
    <script src="app.js"></script>  <!-- Блокирует парсинг! -->
</head>
<body>
    <h1>Hello</h1>
    <link rel="stylesheet" href="styles.css">  <!-- CSS загружается поздно -->
</body>

ХОРОШО: CSS в <head>, JS в конце <body>

<head>
    <link rel="stylesheet" href="styles.css">  <!-- Загружается вперед -->
</head>
<body>
    <h1>Hello</h1>
    <script src="app.js"></script>  <!-- Не блокирует парсинг HTML -->
</body>

ЛУЧШЕ: Async/Defer для JS

<head>
    <link rel="stylesheet" href="styles.css">
    <script async src="analytics.js"></script>  <!-- Загружается параллельно -->
    <script defer src="app.js"></script>       <!-- Выполняется после парсинга -->
</head>
<body>
    <h1>Hello</h1>
</body>

Атрибуты скриптов

<script src="app.js"> (обычный)

Парсинг HTML: ███████████████════════════════════
              ⬆ Стоп, ждем JS
Загрузка JS:                  ████████
Выполнение JS:                        ████
Парсинг HTML (продолжение):               ════════════════

<script async src="app.js">

Парсинг HTML: ███████████████████████████████════
Загрузка JS:  ████████
Выполнение:            ████ (может прерывать парсинг)

<script defer src="app.js">

Парсинг HTML: ███████████████████████████████████
Загрузка JS:  ████████
Выполнение:                                   ████ (после парсинга)

Core Web Vitals и производительность

Последовательность отображения влияет на ключевые метрики:

FCP (First Contentful Paint) — когда браузер отрисовывает первое содержимое (зависит от CSS)
LCP (Largest Contentful Paint) — когда загружается крупный элемент (зависит от CSS и JS)
CLS (Cumulative Layout Shift) — непредвиденные сдвиги макета (плохие: JS меняет DOM)
TTI (Time to Interactive) — когда страница полностью интерактивна (зависит от JS)

Итог

Последовательность: HTML парсинг → Загрузка CSS (блокирует рендеринг) → Загрузка JS (блокирует парсинг) → Построение DOM + CSSOM → Render Tree → Layout → Paint → Composite → Отображение на экране. Важно помещать CSS в <head> для быстрого рендеринга, а JS в конец <body> или использовать async/defer для неблокирующей загрузки.