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

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

Я предпочитаю использовать:

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

element2 {
    background-image: inherit;
}

Это экономит HTTP-запросы?

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

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

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

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

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


html css caching css-sprites
person adardesign    schedule 20.01.2010    source источник

Ответы (3)


arrow_upward
5
arrow_downward

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

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

person JasonTrue    schedule 20.01.2010
comment
так что я получу что-нибудь от использования background-image:inherit;? - person adardesign; 20.01.2010
comment
Чем хуже для пользователей IE6 и IE7? Не совсем. И наследование должно иметь эффект только в том случае, если первый селектор CSS применяется к элементам со вторым; если они не соответствуют обоим или первому, вы ничего не получите. - person JasonTrue; 20.01.2010

arrow_upward
4
arrow_downward

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

person jeffreyveon    schedule 20.01.2010
comment
так что получу ли я что-нибудь от использования background-image: inherit; - person adardesign; 20.01.2010

arrow_upward
1
arrow_downward

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

Удачного кеширования!

person Ilan Biala    schedule 04.09.2012