浏览器是否缓存 CSS 背景图像？答案

【问题标题】：Is the browser caching CSS background images?浏览器是否缓存 CSS 背景图像？
【发布时间】：2011-01-07 09:49:48
【问题描述】：

当我将相同的图像用于不同的元素（精灵图像）时，我通常不会再次调用该图像，因为这是一个新的 HTTP 请求。

我宁愿使用：

element1 {
    background: url(someImage.png);
}

element2 {
    background-image: inherit;
}

这是在保存 HTTP 请求吗？

或者如果浏览器很智能并且我可以使用：

element1 {
    background: url(someImage.png);
}

element2 {
    background: url(someImage.png);
}

浏览器会发出新的 HTTP 请求吗？或者它知道我已经缓存了这张图片？

问题是：使用示例 1 是否有所收获？

【问题讨论】：

【解决方案1】：

在你描述的场景中，浏览器基本上会在一个页面上多次引用同一个图像，这几乎肯定会被缓存。

在不同的页面上，答案取决于浏览器，并且您的服务器发送的过期标头将影响一致性代理中的缓存行为。

【讨论】：

那么使用background-image:inherit;我有什么收获吗？
除了让您的 IE6 和 IE7 用户看起来更糟之外？并不真地。并且继承只有在第一个 css 选择器应用于第二个元素时才有效；如果他们不匹配两者，或者第一个，你什么都得不到。

【解决方案2】：

是的，浏览器将从缓存中加载对 CSS 文件中同一图像的第二个引用。使用 Firebug，您将能够看到浏览器发出的所有 HTTP 请求。

【讨论】：

【解决方案3】：

如果您想简化事情并缓存资源并节省带宽，那么您应该在您网站的根目录中创建一个 appcache.appcache 文件。 This link 给出了制作 appcache 的教程。如果用户多次访问您的网站，它会节省 http 请求，如果缓存中已经存在相同的图像，它会节省两次请求相同的图像。

缓存愉快！

【讨论】：