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

Question

当我将相同的图像用于不同的元素(sprite 图像)时，我通常不会再次调用该图像，因为这是一个新的 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

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

在不同的页面中，答案取决于浏览器，而您的服务器发送的过期 header 将影响符合规范的代理中的缓存行为。