Question

如果我在一个页面中多次使用相同的图像，是否会分别加载，占用带宽和流量，或者只加载一个图像，其余的嵌入代码会重复使用图像？

例如，假设我这样做了：

<img src = 'http://img.to/image.jpg"/>
<img src = 'http://img.to/image.jpg"/>
<img src = 'http://img.to/image.jpg"/>
<img src = 'http://img.to/image.jpg"/>
<img src = 'http://img.to/image.jpg"/>
<img src = 'http://img.to/image.jpg"/>
...
<img src = 'http://img.to/image.jpg"/>
<img src = 'http://img.to/image.jpg"/>

和image.jpg是100kb。当浏览器加载此页面时，它会浪费（100Kb * img标签）的流量吗？或者只是加载一个image.jpg并将其重新用于其余的标签？

Answer 1

尝试一下 - 在查看缓存问题时，像Firebug for Firefox或Chrome中的开发人员工具这样的工具非常有用。如果您在其中任何一个中打开“Net”面板并重新加载页面，您将看到为每个项目发送了什么HTTP状态代码。 304（未修改）表示该项目是从缓存中本地检索的。

正如 dthorpe 所述，缓存标头在这里非常重要。除了确保没有设置'no-cache'，如果你有权访问你的服务器配置，你应该主动 - 如果你知道资源不会改变你应该确保设置一个'Expires'标题（告诉浏览器一个日期，之后缓存的副本应该被认为是陈旧的）或'Cache-Control：max-age'标题（它给出了一些天/小时而不是一个设定的日期）。 / p>

您也可以为不同的mime-types /文件夹设置不同的时间刻度，这样您就可以让客户端数据经常刷新HTML内容，但图片和样式表很少。

这是Google的一个很好的intro video/article，值得一试。

Answer 2

实现5th version of HTML specification的浏览器可以重用图像而不管缓存相关的HTTP标头。可能只会发生单个网络请求。

规范定义了图像密钥。

7.2设key是一个元组，由结果绝对URL，img元素的crossorigin属性模式组成，如果该模式不是No CORS，则是Document对象的起源。

当浏览器下载第一个图像源时，它会使用密钥将其添加到可用图像列表中。

如果下载成功并且用户代理能够确定图像的宽度和高度


将img元素设置为完全可用状态。

使用密钥将图像添加到可用图像列表中。

当浏览器看到具有相同密钥的另一个图像时，它将从可用图像列表中获取它。

7.3如果可用图像列表包含密钥条目，则将img元素设置为完全可用状态，适当更新图像的表示，排队任务以在img元素上触发名为load的简单事件，并中止这些步骤。

尽管如此，浏览器可能会随时从可用图像列表中删除图像。

每个Document对象都必须包含可用图像列表。此列表中的每个图像都由一个元组标识，该元组由绝对URL，CORS设置属性模式组成，如果模式不是No CORS，则为原点。用户代理可以在任何时间将条目从一个Document对象的可用图像列表复制到另一个（例如，当创建文档时，用户代理可以向其添加在其他文档中加载的所有图像），但是不能这样做时，更改以这种方式复制的条目的键。用户代理也可以随时从这些列表中删除图像（例如，以节省内存）。

有关详细信息，请参阅GitHub上的HTML标准存储库中的How does a list of available images used when parsing document with multiple img nodes with same src?问题。

Answer 3

这可能取决于具体的浏览器实现，但我希望第一次引用图像到达服务器，然后从浏览器缓存中提供对同一图像URL的后续引用。因此，只有一个网络请求图像。

也就是说， IF 服务器在映像响应上设置的HTTP缓存头允许浏览器缓存图像。如果缓存标头设置为“no-cache”，则浏览器需要为每个引用重新获取图像。您可以检查图像响应中的HTTP标头正在使用像Fiddler这样的网络数据包嗅探器。

如果浏览器没有在浏览器缓存中填充图像URL，直到图像完全下载完毕，那么您可以看到对同一图像的多个请求，但这似乎不太可能。

当HTML中嵌入了多个相同图像的实例时，是否会加载图像一次？

3 个答案: