Кэширует ли браузер фоновые изображения CSS?

Question

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

Я скорее использую:

element1 {
    background: url(someImage.png);
}

element2 {
    background-image: inherit;
}

Сохраняет ли это HTTP-запросы?

Или, если браузер умный, и я могу использовать:

element1 {
    background: url(someImage.png);
}

element2 {
    background: url(someImage.png);
}

Будет ли браузер отправлять новый HTTP-запрос? Или он знает, что у меня уже есть это изображение в кеше?

Вопрос в том, получу ли я что-нибудь, используя пример 1?

Answer 1

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

На разных страницах ответ зависит от браузера и от того, какие заголовки срока действия отправляет ваш сервер, что повлияет на поведение кэширования в соответствующих агентах.

Answer 2

Да, браузеры будут загружать в кэш вторую ссылку на то же изображение в файле CSS. Используя Firebug, вы сможете увидеть все HTTP-запросы, сделанные браузером.

Answer 3

Если вы хотите упростить вещи, кешировать ресурсы и сэкономить пропускную способность, то вам нужно сделать файл appcache.appcache в корне вашего сайта. Эта ссылка содержит руководство по созданию кэша приложений. Он экономит на запросах http, если пользователь посещает ваш сайт более одного раза, и экономит на запросе одного и того же изображения дважды, если оно уже существует в кэше.

Счастливого Кеширования!