Будет ли браузер кэшировать фоновое изображение CSS, если оно не используется?

когда у вас есть два правила, как это:

.foo {
  background-image: url(foo.gif);
}

.foo {
  background-image: url(bar.gif);
}

и <div class='foo'>Foobar</div>

будет ли ваш браузер кэшировать оба, или только тот, который фактически отображается (bar.gif в данном случае)?

это верно во всех настройках? (правила находятся в разных файлах,!important применяется к одному и т. д.)

7
caching css

5 ответов

Я предполагаю, что " кэш "здесь означает " предварительная загрузка". Фактическое "кэширование" связано с заголовками expires и тому подобным.

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

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

3

браузер не загружает изображения, когда он читает css, он просто держит их в виду. И когда он начинает рендеринг страницы, он начинает загружать изображения.

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

3

лучше всего, как я могу сказать (с FireBug), он только тянет изображения, которые вы отображаете, а не те, которые определены.

1

используя tail-f в моем локальном журнале apache, я нашел следующее:

::1 - - [21/Jul/2010:13:28:50 -0700] "GET /test.html HTTP/1.1" 200 127
::1 - - [21/Jul/2010:13:28:50 -0700] "GET /test.css HTTP/1.1" 304 -
::1 - - [21/Jul/2010:13:28:50 -0700] "GET /bar.gif HTTP/1.1" 404 205

используя firefox, браузер только попытался загрузить " bar.gif " (который был 404 не найден, потому что у меня не было этого изображения).

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

1

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

0