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

Question

Я знаю, что обычной практикой является установка времени истечения в будущем для файлов 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?

Answer 1

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

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

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

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

Answer 2

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

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

Answer 3

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

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

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

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

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