当相同图像的多个实例嵌入到HTML中时,会将图像加载一次吗？

如果我在单页内使用相同的图像多次，会分别加载带宽和流量，还是只加载一个图像，休息嵌入代码将重新使用图像？

例如，假设我这样做：

<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并重新使用它的其余标签？

解决方法

尝试一下 – 在查看缓存问题时，FireBug for Firefox或Chrome中的开发工具等工具非常有益。如果您打开“Net”面板并重新加载页面，您将看到每个项目发送了什么HTTP状态代码。 304(未修改)表示该项目是从缓存中本地检索的。

正如dthorpe所说，缓存头在这里很重要。除了确保“无缓存”尚未设置之外，如果您可以访问服务器配置，则应该是主动的 – 如果您知道资源不会改变，那么您应该确保设置一个’Expires’标头(它告诉浏览器一个日期，之后缓存的副本应该被认为是陈旧的)或一个’Cache-Control：max-age’标题(它提供了几天/小时而不是一个设定的日期)。

您可以为不同的MIME类型/文件夹设置不同的时间尺度，这样可以让客户端数据经常刷新HTML内容，但是图像和样式表很少。

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

原文地址：https://www.jb51.cc/html/233476.html