Когда несколько экземпляров одинаковых изображений встроены в HTML, загружает ли это изображение один раз?

Если я использую одно и то же изображение в одной странице несколько раз, будет ли каждая загрузка отдельно, занимая полосу пропускания и трафик, или будет загружена только одна, а код остальной вставки будет повторно использоваться?

Например, допустим, я сделал это:

<img src = 'http://img.to/image.jpg"/>
<img src = 'http://img.to/image.jpg"/>
<img src = 'http://img.to/image.jpg"/>
<img src = 'http://img.to/image.jpg"/>
<img src = 'http://img.to/image.jpg"/>
<img src = 'http://img.to/image.jpg"/>
...
<img src = 'http://img.to/image.jpg"/>
<img src = 'http://img.to/image.jpg"/>

и image.jpg - 100 кб. Когда браузер загрузит эту страницу, будет ли она тратиться (100 Кбайт * # из img-тегов) трафика? или он просто загрузит один image.jpg и повторно использует его для остальных тегов?

Ответ 1

Попробуйте - при изучении проблем кэширования очень полезен такой инструмент, как Firebug для Firefox или инструменты для разработчиков в Chrome. Если вы откроете панель "Сеть" и перезагрузите страницу, вы увидите, какой код статуса HTTP был отправлен для каждого элемента. 304 (Не изменено) означает, что элемент был извлечен локально из кеша.

Как сказано выше, dthorpe, здесь важны заголовки кеша. Чтобы убедиться, что "no-cache" не установлен, если у вас есть доступ к конфигурации вашего сервера, вы должны быть активными - если вы знаете, что ресурс не изменится, вы должны убедиться, что заголовок "Expires" (который указывает браузерам дату, после которой кешированная копия должна считаться устаревшей) или заголовок "Cache-Control: max-age" (который дает количество дней/часов, а не установленную дату).

Вы можете установить различные временные шкалы для разных типов/папок mime, что позволяет вам получать данные клиентов для частого обновления содержимого HTML, но изображения и таблицы стилей редко.

Вот хороший интро видео/статья от Google, который стоит проверить.

Ответ 2

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

То есть, если заголовки кэша HTTP, установленные сервером при ответе на изображение, позволяют браузеру кэшировать изображение вообще. Если для заголовка кеша установлено что-то вроде "no-cache", браузер должен обновить изображение для каждой ссылки. Вы можете проверить, какие заголовки HTTP в ответе изображения используют сетевой сниффер, например Fiddler.

Если браузер не заполняет URL-адрес изображения в кеше браузера до тех пор, пока изображение не будет полностью загружено, вы можете увидеть несколько запросов для одного и того же изображения, но это кажется очень маловероятным.

Ответ 3

Браузеры, которые реализуют 5-ю версию спецификации HTML, могут повторно использовать изображения независимо от связанных с кешем HTTP-заголовков. Вероятно, произойдет только один сетевой запрос.

Спецификация определяет ключ изображения.

7.2. Пусть ключ - это кортеж, состоящий из итогового абсолютного URL-адреса, режима атрибута crossorigin элемента img и, если этот режим не является CORS, исходным объектом документа.

Когда браузер загружает первый источник изображения, он добавляет его в список доступных изображений с помощью ключа.

Если загрузка прошла успешно, и пользовательский агент смог определить ширину и высоту изображения

Установите элемент img в полностью доступное состояние.

Добавьте изображение в список доступных изображений с помощью ключевого ключа.

Когда браузер видит другое изображение с одним и тем же ключом, он берет его из списка доступных изображений.

7.3 Если список доступных изображений содержит запись для ключа, то установите элемент img в полностью доступное состояние, соответствующим образом обновите представление изображения, поставите задачу для запуска простого события с именем load в элементе img, и прервать эти шаги.

Тем не менее браузер может удалить изображение из списка доступных изображений в любое время.

Каждый объект Document должен иметь список доступных изображений. Каждое изображение в этом списке идентифицируется кортежем, состоящим из абсолютного URL-адреса, режима атрибутов настроек CORS и, если режим не является CORS, источником. Пользовательские агенты могут в любое время копировать записи из одного списка объектов-объектов доступных изображений в другой (например, когда документ создан, пользовательские агенты могут добавлять к нему все изображения, загружаемые в другие документы), но не должны изменять ключи записи, скопированные таким образом при этом. Пользовательские агенты также могут удалять изображения из таких списков в любое время (например, для сохранения памяти).