当相同图像的多个实例嵌入到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值得一试。

相关文章

vue阻止冒泡事件 阻止点击事件的执行 &lt;div @click=&a...
尝试过使用网友说的API接口获取 找到的都是失效了 暂时就使用...
后台我拿的数据是这样的格式: [ {id:1 , parentId: 0, name:...
JAVA下载文件防重复点击,防止多次下载请求,Cookie方式快速简...
Mip是什么意思以及作用有哪些