12

我知道一种常见的做法是为 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自动？

另外，srcfor img-tags 中的图像呢？

4

3 回答 3

10

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

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

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

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

于 2012-07-11T23:53:56.893 回答
2

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

为了确保所有图像都是新鲜的，您可能还需要使用查询字符串版本 (img.png?v=1234) 缓存半身像。

于 2012-07-09T23:02:13.100 回答
2

Chrome 似乎是浏览器中最糟糕的一个，因为它没有更新它的缓存（可能是由于它使用了新的预测缓存方法），而做到这一点的方法确实是使用querystring。

本网站更进一步，使用附加到所有标签的简单 JavaScriptDate().getTime();方法（带或不带 jQuery ）。img

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

上面的好处是，为了查询字符串，不需要单独的图像文件重命名，因为 JavaScript 一次性处理了这个。

虽然它确实使用单行 JavaScript 来完成此操作，但它不像跟踪img大型 CSS 文件中的每个元素那样需要大量维护，这可能需要时间并增加文件大小。

于 2012-07-13T08:16:43.843 回答