5

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

我宁愿使用:

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

element2 {
    background-image: inherit;
}

这是在保存 HTTP 请求吗?

或者,如果浏览器很智能,我可以使用:

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

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

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

问题是:我是否通过使用示例 1 有所收获?

4

3 回答 3

5

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

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

于 2010-01-20T18:27:39.757 回答
4

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

于 2010-01-20T18:27:15.297 回答
1

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

快乐缓存!

于 2012-09-04T19:56:42.823 回答