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自动将文件名更改为/img/logo.png或base.css?v=1234时，会重新加载base_1234.css吗？

另外，src中的img - 标签中的图片怎么样？

Answer 1

浏览器在确定绝对路径后发出这些请求，因此如果您以这种方式“缓存破坏”静态资产，则无论在何处调用，您都需要单独为每个文件执行此操作。但是，您可以通过在后端使变量更容易使自己变得更加轻松。

您可以将字符串附加为您只需要在后端的一个位置更新的变量，可能与LESS或SASS等CSS预处理器一起使用以获取所有图像。

或者通过将版本添加到基本网址（site.com/folder/styles.css =＆gt; site.com/v123/folder/styles.css）来使用相对路径。这可以添加到您应用中的现有静态资产基本url变量，然后在服务器上，您只需使用UrlRewrite去除版本。这样，从CSS中相对引用的所有图像也会自动获得版本，具有相同的“缓存破坏”效果。

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

Answer 2

根据我的经验，css的缓存清除不是递归的。因此，css中引用的图像末尾的查询字符串需要破坏缓存。

为了确保所有图像都是新鲜的，您可能还希望使用查询字符串版本缓存半身像（img.png？v = 1234）。

Answer 3

Chrome浏览器似乎更糟糕的是没有更新它的缓存（可能是由于它正在使用的新预测缓存方法）而且这样做的方式确实是查询字符串

此website更进了一步，使用了附加到所有人的简单JavaScript Date().getTime();方法（ 有或没有jQuery ） img代码。

另一个解决方案是编写一个javascript代码，以便浏览器不会获取图像从缓存中每次都加载它。

以上的好处是，为了查询字符串，不需要单独的图像文件重命名，因为JavaScript在一次传递中处理它。

虽然它确实使用了一行JavaScript来实现这一点，但它并不像追踪大型CSS文件中的每个img元素一样高维护，这可能需要时间并增加文件大小。< / p>

是否有必要将查询字符串附加到img标记中的图像和css中的图像以刷新缓存的项目？

3 个答案: