Нужно ли добавлять квестах к изображениям в теге img и изображениях в css для обновления кешированных элементов?

Я знаю, что распространенная практика заключается в том, чтобы установить время ожидания в будущем для файлов css, javascript и изображений, а затем убедитесь, что все браузеры извлекают последний контент, как только файлы будут изменены, добавив запрос (или изменив имя файла) ) вроде этого

Из этого <link rel="stylesheet" type="text/css" href="base.css">:

<link rel="stylesheet" type="text/css" href="base.css?v=1234">

или

<link rel="stylesheet" type="text/css" href="base_1234.css">

Но как насчет изображений, упомянутых в файле css?

// Inside base.css 
background: url(/img/logo.png)

// Is this necessary(?):
background: url(/img/logo.png?v=1234)

Или перезагрузится ли /img/logo.png, когда base.css автоматически изменит имя файла на base.css?v=1234 или base_1234.css?

А также, что относительно изображений в src для img -tags?

Ответ 1

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

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

Или используйте относительные пути в свою пользу, добавив версию на базовый url (site.com/folder/styles.css = > site.com/v123/folder/styles.css). Это может быть добавлено в существующую переменную url активной базы данных в вашем приложении, а затем на сервере вы можете просто использовать UrlRewrite для изъятия версии. Таким образом, все изображения, относительно отнесенные к вашему CSS, автоматически также получают версию, имеющую тот же эффект "перебора кеша".

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

Ответ 2

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

Чтобы убедиться, что все изображения свежи, вы можете также кэшировать bust с версией querystring (img.png? v = 1234).

Ответ 3

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

Этот веб-сайт делает это еще на один шаг и использует простой метод JavaScript Date().getTime(); (с или без jQuery), который привязан ко всем тегам img.

Другое решение - написать код javascript, чтобы браузер не получал изображение из кеша и загружает его каждый раз.

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

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