如果我在单页内使用相同的图像多次,会分别加载带宽和流量,还是只加载一个图像,休息嵌入代码将重新使用图像?
例如,假设我这样做:
<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值得一试。