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

Question

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

我宁愿使用：

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

element2 {
    background-image: inherit;
}

这是保存HTTP请求吗？

或者，如果浏览器是智能的，我可以使用：

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

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

浏览器是否会发出新的HTTP请求？或者它知道我已经缓存了这个图像？

问题是：我是否通过使用示例1来获得某些东西？

Answer 1

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

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

Answer 2

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

Answer 3

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

快乐缓存！