32

由于必要但难以解释的原因，我在 div 上设置了绝对定位的图像和背景图像。

我想确保一旦浏览器抓取了这些图像（它们非常大），它就不会重新抓取它们。

让我们假设bg.jpg以下代码中的图像是 500KB。以下代码是否会导致浏览器将整个图像下载两次，总共 1000KB？

<style>
    header {
        background: url(img/bg.jpg) center center fixed transparent;
    }
</style>

<header>
    <img src="img/bg.jpg" width="500" height="500">
</header>

编辑：谢谢大家的出色回答。我只是想仔细检查并确保我没有导致用户重新下载这些非常大的图像。

4

3 回答 3

35

浏览器在缓存方面非常聪明。它应该只要求一次。

此外，当它向服务器请求图像时，它通常会发送图像请求，以及一些告诉服务器的标头。嘿，我想要这个图像，但我已经有了一个具有你告诉我的这些属性的图像上次你发给我的时候。

然后服务器可以响应200它的不同内容304意味着你拥有的内容相同，所以我不会再次发送它，使用你得到的那个..

其中一种方法使用ETAG 标头，但还有更多。

您的服务器需要支持这一点，但大多数都支持。

此外，interweb 由一堆缓存组成，它们还会查看这些标头值并为您返回内容。这就是 web 扩展得如此之好的原因 ;-)

于 2012-08-01T00:49:23.143 回答
5

不，浏览器会缓存它。但是，根据用户的设置，浏览器可能会在下次请求页面时再次请求图像，例如，如果用户在页面访问之间清除缓存。

于 2012-08-01T00:45:19.253 回答
3

不，它会下载一次，然后放在浏览器缓存中。下次引用该 URL 时，它将从缓存中查找图像，而不是从服务器中检索它。

于 2012-08-01T00:46:12.133 回答