Как браузер понимает что нужно получить картинку на сервере?

Как браузер определяет необходимость получения изображения с сервера

Этот процесс является частью общего механизма парсинга и рендеринга HTML/CSS браузером. Давайте разберем его поэтапно.

Этап 1: Парсинг HTML и построение DOM

Когда браузер получает HTML-"документ, он начинает его синтаксический анализ (parsing). При встрече тега <img> парсер создает соответствующий узел в DOM (Document Object Model).

<!-- Пример. При парсинге этой строки браузер создаст элемент изображения. -->
<img src="https://example.com/picture.jpg" alt="Пример">

Ключевой атрибут здесь — src (source). Его значение содержит URL ресурса. Сам по себе тег <img> лишь указывает на место, откуда нужно получить данные, но не содержит самих пикселей изображения.

Этап 2: Парсинг CSS и построение CSSOM

Параллельно или после построения DOM браузер анализирует CSS. Здесь изображения могут быть указаны с помощью свойства background-image.

/* Пример из CSS. Браузер также поймет, что нужно загрузить этот ресурс. */
.banner {
    background-image: url("../images/banner.png");
}

На этом этапе формируется CSSOM (CSS Object Model) — дерево стилей. Узлы CSSOM связываются с узлами DOM.

Этап 3: Формирование "Ресурсных" запросов

Браузерный движок (например, Blink в Chrome, Gecko в Firefox) на основе объединенного дерева Render Tree (комбинации DOM и CSSOM) определяет, какие ресурсы необходимы для отображения страницы. Все найденные URL изображений (из src атрибутов и url() функций) помещаются в очередь на загрузку.

Важные нюансы определения необходимости:

• Строгое соответствие спецификации: Браузер выполняет инструкции кода. Если в разметке есть <img src="..."> — это прямая команда на загрузку.

• Учет CSS-правил: Изображения из CSS загружаются, только если соответствующий стиль применен к видимому элементу на странице. Если правило скрыто медиа-запросом (@media (max-width: 768px)) и текущие условия экрана не соответствуют, загрузка не начнется. Это основа отзывчивого дизайна (responsive design).

• Ленивая загрузка (lazy loading): Современные браузеры поддерживают атрибут loading="lazy". В этом случае браузер откладывает загрузку изображения, пока оно не окажется близко к области просмотра (viewport). Решение о необходимости загрузки принимает алгоритм предварительного рендеринга, оценивая расстояние до viewport.

  <!-- Браузер поймет, что нужно получить это изображение, но не сразу, а когда пользователь прокрутит страницу. -->
  <img src="large-image.jpg" alt="Большая картинка" loading="lazy">
  

Этап 4: Разрешение URL и инициирование сетевого запроса

Перед отправкой запроса браузер должен получить абсолютный URL:

1. Разрешение относительных путей: Если в src указан относительный путь (/images/photo.png или ../assets/icon.svg), браузер преобразует его в абсолютный, используя базовый URL (base URL) текущего документа.
2. Проверка кеша: Браузер всегда сначала проверяет свои кеши (HTTP Cache, Memory Cache, Service Worker Cache). Если найдена свежая (не устаревшая согласно заголовкам Cache-Control) валидная копия изображения, сетевой запрос не выполняется. Это критически важный этап для производительности.
3. Создание HTTP(S) запроса: Если валидной копии в кеше нет, браузер инициирует HTTP GET-запроса по полученному абсолютному URL. Этот запрос проходит через все слои сетевого стека браузера (DNS-разрешение, установка TCP-соединения, TLS-рукопожатие для HTTPS).

Этап 5: Получение и обработка ответа

Сервер отвечает с кодом статуса и данными.

• Успех (Status 200 OK): Браузер начинает получать поток байтов. По заголовкам ответа (Content-Type: image/jpeg) он понимает тип изображения и может начать декодирование.
• Редирект (Status 301, 302, etc.): Браузер автоматически следует по новому URL из заголовка Location и повторяет процесс для него.
• Ошибка (Status 404): Браузер запускает обработку ошибки. Часто это отображение "битого" изображения (стандартной иконки) или срабатывание обработчика события onerror.

  imgElement.onerror = function() {
      console.log("Не удалось загрузить изображение");
      this.src = '/fallback-image.png'; // Попытка загрузить резервный вариант
  };
  

• Декодирование и растеризация: Полученные бинарные данные (JPEG, PNG, WebP, AVIF) декодируются в bitmap, которая затем передается в композитный поток для отрисовки на экране.

Итог и ключевые принципы

Браузер не "понимает" в семантическом смысле, а следует алгоритмическим правилам парсинга и построения модели рендеринга:

1. Парсинг команд: Анализ HTML и CSS выявляет все объявленные ресурсы.
2. Контекстный анализ: Решение о немедленной загрузке зависит от видимости стилей и атрибутов (например, loading).
3. Приоритет кеширования: Перед сетевым запросом — обязательная проверка кеша.
4. Сетевой стек: При отсутствии в кеше — выполнение стандартного HTTP-запроса.

Этот механизм обеспечивает баланс между точным исполнением разработчика и оптимизацией производительности (через кеш, ленивую загрузку, приоритезацию критических ресурсов).