\n\n\n

Hello World

\n

Paragraph

\n \n\n\n```\n\n**Браузер начинает с парсинга HTML снизу вверх (сверху вниз) в зависимости от контекста:**\n\n1. Браузер начинает **парсить HTML из ``**\n2. Парсит `` элементы:\n - Meta теги\n - Ссылки на CSS (``)\n - Встроенный CSS (`\n \n \n \n \n \n \n\n\n \n
...
\n
...
\n \n \n \n \n \n \n \n \n \n\n\n```\n\n### Атрибуты Script: Контроль порядка парсинга\n\n#### Синхронный (по умолчанию)\n\n```html\n\n```\n\n**Порядок выполнения:**\n1. Парсинг HTML ОСТАНОВЛЕН\n2. Загрузить main.js\n3. Выполнить main.js\n4. Продолжить парсинг HTML\n\n**Диаграмма:**\n```\nHTML Parsing: |--- STOP ---|main.js load + execute|--- CONTINUE ---|\n```\n\n#### Async (асинхронный)\n\n```html\n\n```\n\n**Порядок выполнения:**\n1. HTML продолжает парсится\n2. Параллельно загружается analytics.js\n3. Когда analytics.js загружен — выполняется (может прерывать парсинг)\n4. HTML парсинг продолжается\n\n**Диаграмма:**\n```\nHTML Parsing: |--- CONTINUE --- (analytics.js load) --- EXECUTE --- CONTINUE ---|\n```\n\n**Важно:** порядок выполнения async скриптов **не гарантирован**!\n\n```html\n\n\n\n```\n\n#### Defer (отложенный)\n\n```html\n\n```\n\n**Порядок выполнения:**\n1. HTML парсится полностью\n2. Параллельно загружается main.js\n3. После завершения парсинга HTML — выполняется main.js\n4. Только после этого триггер DOMContentLoaded\n\n**Диаграмма:**\n```\nHTML Parsing: |--- CONTINUE --- (main.js load) --- FINISH HTML --- EXECUTE main.js ---|\n```\n\n**Важно:** порядок выполнения defer скриптов **гарантирован** (в порядке в HTML)!\n\n```html\n\n\n\n```\n\n### Жизненный цикл загрузки страницы\n\n```javascript\n// 1. Парсинг HTML и загрузка ресурсов\nconsole.log(\"1. HTML парсится\");\n\n// 2. Встречен \n \n\n\n

Привет

\n \n\n```\n\n```html\n\n\n \n \n \n \n \n \n \n\n\n

Привет

\n \n \n \n \n \n \n \n\n```\n\n### Пример: Реальный порядок выполнения\n\n```html\n\n\n Example\n\n\n

Paragraph 1

\n \n \n \n

Paragraph 2

\n \n \n \n \n

Paragraph 3

\n\n\n```\n\n**Реальный порядок вывода:**\n```\n1. Inline script (выполнится сразу при парсинге)\n(может быть async.js если загрузился быстро)\nDOMContentLoaded (после парсинга HTML и деferred.js)\nload (после всех ресурсов)\n```\n\n### Заключение\n\nБраузер парсит в этом порядке:\n\n1. **HTML сверху вниз** (stop на синхронных скриптах)\n2. **Встроенный CSS** выполняется немедленно\n3. **Синхронные скрипты** блокируют парсинг\n4. **Async скрипты** загружаются параллельно, выполняются в случайном порядке\n5. **Defer скрипты** загружаются параллельно, выполняются в порядке после HTML\n6. **DOMContentLoaded** триггерится после парсинга HTML и выполнения defer скриптов\n7. **Load** триггерится после загрузки всех ресурсов\n\nОптимизация: CSS в head, синхронный JS в конце, async/defer для некритичного кода.","dateCreated":"2026-04-02T22:03:23.717258","upvoteCount":0,"author":{"@type":"Person","name":"claude-haiku-4.5"}}}}
PrepBro
← Назад к вопросам

В каком порядке браузер парсит код

1.3 Junior🔥 231 комментариев
#Браузер и сетевые технологии

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

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

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

В каком порядке браузер парсит код

Браузер проходит через чётко определённую последовательность этапов при загрузке и обработке веб-страницы. Это называется критический путь рендеринга (critical rendering path).

Основные этапы парсинга

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Page Title</title>
  <link rel="stylesheet" href="style.css">
  <script src="preload.js"></script>
</head>
<body>
  <h1>Hello World</h1>
  <p>Paragraph</p>
  <script src="main.js"></script>
</body>
</html>

Браузер начинает с парсинга HTML снизу вверх (сверху вниз) в зависимости от контекста:

  1. Браузер начинает парсить HTML из <html>
  2. Парсит <head> элементы:
    • Meta теги
    • Ссылки на CSS (<link>)
    • Встроенный CSS (<style>)
    • Встроенный JavaScript (<script>)
  3. При встрече синхронного <script> ПАРСИНГ ОСТАНАВЛИВАЕТСЯ, пока загружается и выполняется JS
  4. Парсит <body> элементы
  5. При встрече <script> в конце тела снова останавливается парсинг
  6. Финально — </html>

Блокирующие операции

❌ Синхронный JavaScript блокирует парсинг

<head>
  <script src="heavy.js"></script> <!-- Браузер ЖДЁТ загрузку и выполнение -->
  <h1>После скрипта</h1> <!-- Парсинг продолжится только после heavy.js -->
</head>

Процесс:

  1. HTML парсер встречает <script src="heavy.js">
  2. Парсинг ЗАМОРАЖИВАЕТСЯ
  3. Браузер загружает heavy.js (может быть 5 секунд)
  4. JavaScript выполняется (может быть ещё 5 секунд)
  5. Только потом парсинг продолжается

Это называется "парсер-блокирующий скрипт" (parser-blocking script).

❌ CSS также может блокировать (косвенно)

<head>
  <link rel="stylesheet" href="style.css"> <!-- Загружается асинхронно -->
  <script>console.log("текст");</script> <!-- Ждёт CSS перед выполнением -->
</head>

CSS загружается параллельно, но JavaScript ждёт, пока CSS загрузится перед выполнением (чтобы getComputedStyle работал корректно).

Оптимизированный порядок парсинга

<!DOCTYPE html>
<html>
<head>
  <!-- 1. Meta теги и информация о странице -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <!-- 2. Критически важный CSS (above-the-fold) -->
  <style>
    body { font-family: Arial; } /* Встроенный CSS выполняется сразу */
  </style>
  
  <!-- 3. Некритические CSS можно отложить -->
  <link rel="stylesheet" href="style.css" media="print">
  
  <!-- 4. Preload для критических ресурсов -->
  <link rel="preload" as="script" href="critical.js">
</head>
<body>
  <!-- 5. Содержимое страницы -->
  <header>...</header>
  <main>...</main>
  
  <!-- 6. JavaScript в конце (не блокирует парсинг) -->
  <script src="main.js"></script>
  
  <!-- 7. Асинхронные скрипты -->
  <script src="analytics.js" async></script>
  
  <!-- 8. Отложенные скрипты -->
  <script src="deferred.js" defer></script>
</body>
</html>

Атрибуты Script: Контроль порядка парсинга

Синхронный (по умолчанию)

<script src="main.js"></script>

Порядок выполнения:

  1. Парсинг HTML ОСТАНОВЛЕН
  2. Загрузить main.js
  3. Выполнить main.js
  4. Продолжить парсинг HTML

Диаграмма:

HTML Parsing: |--- STOP ---|main.js load + execute|--- CONTINUE ---|

Async (асинхронный)

<script src="analytics.js" async></script>

Порядок выполнения:

  1. HTML продолжает парсится
  2. Параллельно загружается analytics.js
  3. Когда analytics.js загружен — выполняется (может прерывать парсинг)
  4. HTML парсинг продолжается

Диаграмма:

HTML Parsing: |--- CONTINUE --- (analytics.js load) --- EXECUTE --- CONTINUE ---|

Важно: порядок выполнения async скриптов не гарантирован!

<script src="a.js" async></script>
<script src="b.js" async></script>
<!-- Может выполниться b.js, потом a.js, или a.js потом b.js -->

Defer (отложенный)

<script src="main.js" defer></script>

Порядок выполнения:

  1. HTML парсится полностью
  2. Параллельно загружается main.js
  3. После завершения парсинга HTML — выполняется main.js
  4. Только после этого триггер DOMContentLoaded

Диаграмма:

HTML Parsing: |--- CONTINUE --- (main.js load) --- FINISH HTML --- EXECUTE main.js ---|

Важно: порядок выполнения defer скриптов гарантирован (в порядке в HTML)!

<script src="a.js" defer></script>
<script src="b.js" defer></script>
<!-- Выполнится точно: a.js, потом b.js -->

Жизненный цикл загрузки страницы

// 1. Парсинг HTML и загрузка ресурсов
console.log("1. HTML парсится");

// 2. Встречен <script> в конце HTML
console.log("2. Скрипт выполняется");

// 3. Парсинг завершён
document.addEventListener("DOMContentLoaded", () => {
  console.log("3. DOM полностью загружен (даже defer скрипты выполнены)");
});

// 4. Все ресурсы загружены (картинки, стили, etc)
window.addEventListener("load", () => {
  console.log("4. Страница полностью загружена");
});

Порядок вывода:

1. HTML парсится
2. Скрипт выполняется
3. DOM полностью загружен
4. Страница полностью загружена

Построение DOM и CSSOM

// HTML -> DOM Tree
HTML Parsing: <div><p>Text</p></div>
              |
              v
          DOM Tree:
          div
          |
          p ("Text")

// CSS -> CSSOM Tree
CSS Parsing: div { color: red; }
             |
             v
          CSSOM Tree:
          div -> { color: red, ... }

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

1. HTML Parsing
   |
   v
2. CSS Loading (не блокирует парсинг, но блокирует рендеринг)
   |
   v
3. DOM + CSSOM готовы
   |
   v
4. Render Tree построено (DOM + CSSOM)
   |
   v
5. Layout (вычисление размеров и позиций)
   |
   v
6. Paint (рисование на пиксели)
   |
   v
7. Composite (объединение слоёв)

Оптимизация парсинга

<!-- ❌ Неоптимизировано -->
<head>
  <script src="heavy-lib.js"></script> <!-- Блокирует парсинг на 5 сек -->
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Привет</h1>
  <!-- Пользователь не видит контент 5+ секунд -->
</body>

<!-- ✅ Оптимизировано -->
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <!-- Критический CSS встроенный -->
  <style>
    h1 { font-size: 2em; }
  </style>
  <!-- CSS в начале -->
  <link rel="stylesheet" href="style.css">
  <!-- JS в конце (не блокирует) -->
</head>
<body>
  <h1>Привет</h1>
  <!-- Пользователь видит контент сразу -->
  
  <!-- Асинхронные скрипты не блокируют -->
  <script src="analytics.js" async></script>
  
  <!-- Основной JS в конце с defer -->
  <script src="main.js" defer></script>
</body>

Пример: Реальный порядок выполнения

<html>
<head>
  <title>Example</title>
</head>
<body>
  <p>Paragraph 1</p>
  
  <script>
    console.log("1. Inline script");
  </script>
  
  <p>Paragraph 2</p>
  
  <script src="async.js" async></script>
  <script src="deferred.js" defer></script>
  
  <p>Paragraph 3</p>
</body>
</html>

Реальный порядок вывода:

1. Inline script (выполнится сразу при парсинге)
(может быть async.js если загрузился быстро)
DOMContentLoaded (после парсинга HTML и деferred.js)
load (после всех ресурсов)

Заключение

Браузер парсит в этом порядке:

  1. HTML сверху вниз (stop на синхронных скриптах)
  2. Встроенный CSS выполняется немедленно
  3. Синхронные скрипты блокируют парсинг
  4. Async скрипты загружаются параллельно, выполняются в случайном порядке
  5. Defer скрипты загружаются параллельно, выполняются в порядке после HTML
  6. DOMContentLoaded триггерится после парсинга HTML и выполнения defer скриптов
  7. Load триггерится после загрузки всех ресурсов

Оптимизация: CSS в head, синхронный JS в конце, async/defer для некритичного кода.

В каком порядке браузер парсит код | PrepBro