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

前端之家收集整理的这篇文章主要介绍了当相同图像的多个实例嵌入到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.f2er.com/html/233476.html

猜你在找的HTML相关文章