如果我在一个页面中多次使用相同的图像,是否会分别加载,占用带宽和流量,或者只加载一个图像,其余的嵌入代码会重复使用图像？
例如,假设我这样做了:
<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并将其重新用于其余的标签？
ano*_*ave 15
尝试一下 - 在查看缓存问题时,像Firebug for Firefox或Chrome中的开发人员工具这样的工具非常有用.如果您在其中任何一个中打开"Net"面板并重新加载页面,您将看到为每个项目发送了什么HTTP状态代码.304(未修改)表示该项目是从缓存中本地检索的.
正如dthorpe上面所说,缓存头在这里很重要.除了确保没有设置'no-cache',如果你有权访问你的服务器配置,你应该主动 - 如果你知道资源不会改变你应该确保设置一个'Expires'标题(告诉浏览器一个日期,之后缓存的副本应该被认为是陈旧的)或'Cache-Control:max-age'标题(它给出了一些天/小时而不是一个设定的日期).
您也可以为不同的mime类型/文件夹设置不同的时间刻度,这使您可以获取客户端数据以经常刷新HTML内容,但很少使用图像和样式表.
这是Google推出的一个很好的介绍视频/文章,值得一试.
Leo*_*lev 13
实现第5版HTML规范的浏览器可以重用图像,而不管与缓存相关的HTTP头.可能只会发生单个网络请求.
规范定义了图像密钥.
7.2设key是一个元组,由结果绝对URL,img元素的crossorigin属性模式组成,如果该模式不是No CORS,则是Document对象的原点.
当浏览器下载第一个图像源时,它会使用密钥将其添加到可用图像列表中.
如果下载成功并且用户代理能够确定图像的宽度和高度
- 将img元素设置为完全可用状态.
- 使用密钥将图像添加到可用图像列表中.
当浏览器看到具有相同键的另一个图像时,它将从可用图像列表中获取它.
7.3如果可用图像列表包含密钥条目,则将img元素设置为完全可用状态,适当更新图像的表示,排队任务以在img元素上触发名为load的简单事件,并中止这些脚步.
然而,浏览器可以随时从可用图像列表中删除图像.
每个Document对象都必须包含可用图像列表.此列表中的每个图像都由一个元组标识,该元组由绝对URL,CORS设置属性模式组成,如果模式不是No CORS,则为原点.用户代理可以随时将条目从一个Document对象的可用图像列表复制到另一个(例如,创建文档时,用户代理可以将其他文档中加载的所有图像添加到其中),但不得更改这样做时以这种方式复制的条目.用户代理还可以在任何时间从这些列表中删除图像(例如,以节省存储器).
有关更多信息,请参阅解析具有相同src的多个img节点的文档时使用的可用映像列表？GitHub上的HTML标准存储库中的问题.
它可能取决于具体的浏览器实现,但我希望第一次引用图像到达服务器,然后从浏览器缓存中提供对相同图像URL的后续引用.因此,只有一个网络请求图像.
也就是说,如果服务器在图像响应上设置的HTTP缓存头允许浏览器根本缓存图像.如果缓存标头设置为"no-cache",则浏览器需要为每个引用重新获取图像.您可以检查图像响应上的HTTP标头正在使用像Fiddler这样的网络数据包嗅探器.
如果浏览器没有在浏览器缓存中填充图像URL,直到图像完全下载完毕,那么您可以看到对同一图像的多个请求,但这似乎不太可能.