\n\n\n\"Пример\"\n```\n\n**2. Приоритизация и параллельная загрузка**\nСовременные браузеры используют сложные алгоритмы приоритизации:\n\n- Высокий приоритет: CSS, шрифты, синхронные скрипты в ``\n- Средний приоритет: изображения в области просмотра (above the fold)\n- Низкий приоритет: скрипты с `defer`, изображения ниже области просмотра\n\n**3. Preload scanner (пре-лоадер)**\nОтдельный компонент браузера предварительно сканирует HTML и инициирует загрузку ресурсов ДО их обработки основным парсером:\n\n```html\n\n\n```\n\n### Типы ресурсов и их особенности\n\n#### **JavaScript файлы**\n- Синхронные скрипты блокируют DOM Construction\n- Атрибуты `async` и `defer` меняют поведение:\n ```html\n \n \n ```\n\n#### **CSS стили**\n- Блокируют рендеринг, но не обязательно парсинг HTML\n- Создают **CSSOM (CSS Object Model)**, необходимый для Render Tree\n- Критический CSS рекомендуется встраивать inline для ускорения First Paint\n\n#### **Изображения и медиа**\n- Загружаются асинхронно с использованием **ленивой загрузки (lazy loading)**\n- Современный подход с использованием атрибута `loading`:\n ```html\n \"Важное\n \"Второстепенное\"\n ```\n\n#### **Шрифты**\n- FOIT/FOUT проблемы: невидимый текст пока не загрузится шрифт\n- Оптимизация через `font-display` свойство:\n ```css\n @font-face {\n font-family: 'CustomFont';\n src: url('font.woff2') format('woff2');\n font-display: swap; /* Использовать fallback шрифт сразу */\n }\n ```\n\n### Влияние на производительность\n\n**Основные метрики, на которые влияет загрузка ресурсов:**\n- **FCP (First Contentful Paint)** - зависит от CSS и блокирующих скриптов\n- **LCP (Largest Contentful Paint)** - определяется самыми большими изображениями/шрифтами\n- **CLS (Cumulative Layout Shift)** - вызывается поздно загружающимися изображениями без размеров\n\n**Оптимизационные стратегии:**\n1. **Предварительная загрузка критических ресурсов** через ``\n2. **Минимизация блокирующих ресурсов** в ``\n3. **Компрессия и современные форматы** (WebP вместо JPEG, WOFF2 вместо TTF)\n4. **Использование HTTP/2** для мультиплексирования соединений\n5. **Кэширование** через правильные Cache-Control заголовки\n\n### Современные подходы и best practices\n\n**Модульный подход к ресурсам:**\n```html\n\n\n\n```\n\n**Ресурсные хинты:**\n```html\n\n\n\n```\n\n**Приоритизация в современных браузерах:**\nБраузеры используют **Resource Hints API** и **Fetch Priority API** для интеллектуального управления загрузкой:\n\n```html\n\n\n```\n\nПонимание механизмов загрузки внешних ресурсов позволяет фронтенд-разработчикам создавать быстрые, отзывчивые веб-приложения. Ключевой принцип — минимизировать блокирующие операции, использовать современные стандарты и постоянно мониторить реальные метрики производительности через **Lighthouse**, **WebPageTest** и инструменты разработчика браузера.","dateCreated":"2026-04-06T23:20:00.880194","upvoteCount":0,"author":{"@type":"Person","name":"deepseek-v3.2"}}}}
PrepBro
← Назад к вопросам

Что происходит с внешними ресурсами при парсинге браузером HTML кода?

2.3 Middle🔥 191 комментариев
#HTML и CSS

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

🐱
deepseek-v3.2PrepBro AI6 апр. 2026 г.(ред.)

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

Процесс загрузки внешних ресурсов при парсинге HTML

Когда браузер парсит HTML-код, он не просто обрабатывает текст, а активно взаимодействует с внешними ресурсами, что критически влияет на производительность и отображение страницы. Этот процесс представляет собой сложную цепочку событий, оптимизированную для баланса между скоростью и функциональностью.

Основные этапы обработки внешних ресурсов

1. Синхронный и асинхронный парсинг DOM При встрече с тегами, ссылающимися на внешние ресурсы (например, <script>, <link>, <img>), браузер использует разные стратегии:

  • Блокирующие ресурсы: Стили (<link rel="stylesheet">) и синхронные скрипты (<script> без атрибутов async/defer) приостанавливают парсинг HTML до их полной загрузки и выполнения
  • Неблокирующие ресурсы: Изображения, iframes, медиафайлы загружаются асинхронно, не прерывая построение DOM
<!-- Блокирующий ресурс - парсинг приостанавливается -->
<script src="critical.js"></script>

<!-- Неблокирующий ресурс - загрузка параллельно с парсингом -->
<img src="image.jpg" alt="Пример">

2. Приоритизация и параллельная загрузка Современные браузеры используют сложные алгоритмы приоритизации:

  • Высокий приоритет: CSS, шрифты, синхронные скрипты в <head>
  • Средний приоритет: изображения в области просмотра (above the fold)
  • Низкий приоритет: скрипты с defer, изображения ниже области просмотра

3. Preload scanner (пре-лоадер) Отдельный компонент браузера предварительно сканирует HTML и инициирует загрузку ресурсов ДО их обработки основным парсером:

<!-- Пре-лоадер увидит эту ссылку и начнет загрузку раньше -->
<link rel="preload" href="font.woff2" as="font">

Типы ресурсов и их особенности

JavaScript файлы

  • Синхронные скрипты блокируют DOM Construction
  • Атрибуты async и defer меняют поведение: 
    <script async src="analytics.js"></script>  <!-- Выполняется сразу после загрузки -->
<script defer src="main.js"></script>       <!-- Выполняется после парсинга -->

CSS стили

  • Блокируют рендеринг, но не обязательно парсинг HTML
  • Создают CSSOM (CSS Object Model), необходимый для Render Tree
  • Критический CSS рекомендуется встраивать inline для ускорения First Paint

Изображения и медиа

  • Загружаются асинхронно с использованием ленивой загрузки (lazy loading)
  • Современный подход с использованием атрибута loading: 
    <img src="hero.jpg" loading="eager" alt="Важное изображение">
<img src="avatar.jpg" loading="lazy" alt="Второстепенное">

Шрифты

  • FOIT/FOUT проблемы: невидимый текст пока не загрузится шрифт
  • Оптимизация через font-display свойство: 
    @font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2');
  font-display: swap; /* Использовать fallback шрифт сразу */
}

Влияние на производительность

Основные метрики, на которые влияет загрузка ресурсов:

  • FCP (First Contentful Paint) - зависит от CSS и блокирующих скриптов
  • LCP (Largest Contentful Paint) - определяется самыми большими изображениями/шрифтами
  • CLS (Cumulative Layout Shift) - вызывается поздно загружающимися изображениями без размеров

Оптимизационные стратегии:

  1. Предварительная загрузка критических ресурсов через <link rel="preload">
  2. Минимизация блокирующих ресурсов в <head>
  3. Компрессия и современные форматы (WebP вместо JPEG, WOFF2 вместо TTF)
  4. Использование HTTP/2 для мультиплексирования соединений
  5. Кэширование через правильные Cache-Control заголовки

Современные подходы и best practices

Модульный подход к ресурсам:

<!-- Современный способ загрузки модулей ES6 -->
<script type="module" src="app.js"></script>
<!-- Загружается автоматически с defer-поведением -->

Ресурсные хинты:

<link rel="preconnect" href="https://cdn.example.com">
<link rel="dns-prefetch" href="//analytics.site.com">
<link rel="prefetch" href="/next-page.html" as="document">

Приоритизация в современных браузерах: Браузеры используют Resource Hints API и Fetch Priority API для интеллектуального управления загрузкой:

<img src="hero.jpg" fetchpriority="high">
<script src="background.js" fetchpriority="low"></script>

Понимание механизмов загрузки внешних ресурсов позволяет фронтенд-разработчикам создавать быстрые, отзывчивые веб-приложения. Ключевой принцип — минимизировать блокирующие операции, использовать современные стандарты и постоянно мониторить реальные метрики производительности через Lighthouse, WebPageTest и инструменты разработчика браузера.

Что происходит с внешними ресурсами при парсинге браузером HTML кода? | PrepBro