在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)

当 base.css 的文件名更改为 base.css?v=1234 或 base_1234.css 时，/img/logo.png 是否会自动重新加载？

还有，在 img 标签的 src 属性中的图像呢？

- Fredrik

Answer 1

浏览器在确定绝对路径后才发出这些请求，因此如果您以这种方式“缓存清除”您的静态资源，则需要为每个文件单独执行此操作，无论它在何处调用。但是，您可以通过将其设置为后端上的变量来使自己更轻松。

您可以将该字符串附加为变量，您只需要在后端的一个地方更新该变量，可能与CSS预处理器（如LESS或SASS）一起使用以获得所有图像。

或者利用相对路径的优势，将版本添加到基本URL中（site.com/folder/styles.css => site.com/v123/folder/styles.css）。这可以添加到应用程序中现有的静态资产基本URL变量中，然后在服务器上，您只需使用UrlRewrite来剥离版本即可。这样，从您的CSS相对引用的所有图像也会自动获得版本，具有相同的“缓存清除”效果。

您可以非常聪明地将变量自动设置为构建过程的一部分，作为您版本控制系统的最后提交哈希值 - 这也将使未来的调试更加容易。

- swider

Answer 2

根据我的经验，CSS文件的缓存清除不是递归的。因此，在CSS中引用的图像末尾需要使用查询字符串来清除缓存。

为了确保所有图像都是最新的，您可能还希望使用查询字符串版本（img.png?v=1234）进行缓存清除。

- adamclerk

Answer 3

Chrome似乎是浏览器中最不善于更新缓存的一个（也许是因为它使用了新的预测性缓存方法），解决这个问题的方法确实是使用查询字符串。这个网站更进一步，使用简单的JavaScript Date().getTime();方法（带或不带jQuery），将其附加到所有img标签上。

另一个解决方案是编写JavaScript代码，以便浏览器不从缓存中获取图像并在每次加载时重新加载它。

以上方法的好处是不需要为查询字符串而单独重命名每个图像文件，因为JavaScript可以一次性处理这个问题。

虽然它只使用了一行JavaScript来完成这个任务，但与在大型CSS文件中跟踪每个img元素相比，它不需要太多维护工作，这可能需要花费时间并增加文件大小。

- arttronics