如果同时在图像的 src 和 div 的背景图像中使用，浏览器会下载图像两次吗？答案

【问题标题】：Will browser download image twice if it's used in both an image's src as well as a div's background-image?如果同时在图像的 src 和 div 的背景图像中使用，浏览器会下载图像两次吗？
【发布时间】：2012-07-29 20:45:17
【问题描述】：

由于必要但在这里难以解释的原因，我在 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>

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

【问题讨论】：

我认为它会下载一次并兑现。第二张图片将从现金中读取。
@MiljanPuzović 为了正确起见，您的意思是“缓存”而不是“现金”
@BrianFunt 谢谢，那是 3 年前，我的英语很糟糕 :)

标签： html css browser

【解决方案1】：

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

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

然后服务器可以回复 200 表示它是不同的内容 304 表示你拥有的是相同的，所以我不会再次发送它，使用你得到的那个..

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

如果我没记错的话，它会做另一个http请求来检查缓存的有效性。
@bPratik - 浏览器不会在发出请求之前检查缓存。
请参阅下面来自developer.yahoo.com/performance/rules.html/#js_dupes 的引用。相同的逻辑是否不适用于其他静态内容？ "在 Internet Explorer 中会发生不必要的 HTTP 请求，但在 Firefox 中不会发生。在 Internet Explorer 中，如果外部脚本被包含两次且不可缓存，则它会在页面加载期间生成两个 HTTP 请求。即使脚本可缓存，额外的当用户重新加载页面时会发生 HTTP 请求。”
@bPratik - 让 IE 来解决所有问题。即便如此，它仍然不会下载两次，并且文章假定脚本不可缓存。

【解决方案3】：

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

【讨论】：