Использовать браузер для повторного чтения кэшированных изображений

.button {       background: url (../Images/button.png);   }

Проблема: по соображениям производительности все статические материалы имеют заголовки истечения срока действия и кэшируются браузером. При изменении изображения пользователь должен обновить кеш (Ctrl + F5 в IE). Я хочу, чтобы изображения были кэшированы, но при необходимости они должны быть автоматически перезагружены.

Вопрос: следующий подход "valid"?

.button {
    background: url(../Images/button.png?v=1234);
}

где v = 1234 - это версия моего сайта. Я не знаю, является ли это 100% действительным для написания таких вещей в CSS, и я хочу, чтобы браузеры все еще кэшировали изображения, если версия такая же. Все ли современные браузеры корректно кэшируют данные с частью параметров URL?

Спасибо.

Ответ 1

Это выглядит как хороший подход ко мне, он отлично работает в CSS в современных браузерах - браузер будет смотреть на адрес изображения (включая ?v=1234), видеть, что он не кэширован, и отправить новый запрос.

Ответ 2

Это обсуждается в правиле 3 Высокопроизводительные веб-сайты: "Добавить срок действия или заголовок управления кэшем". Один из рекомендуемых подходов - это версия файлов, а не сайта.

Из сопроводительный блог:

Имейте в виду, что если вы используете длинный заголовок Expires будущего, вы должны изменить имя файла компонента при изменении компонента. В Yahoo! мы часто делаем этот шаг частью процесса сборки: номер версии встроен в имя файла компонента, например yahoo_2.0.6.js.