当同一图像的多个实例嵌入HTML，是否加载图像一次？ [英] When multiple instances of same images are embedded in an HTML, does that load the image once?

问题描述

如果我用一个单一页面内同一图像多次，将各自分装，占用带宽和流量，或将只有一个被加载和休息嵌入code将重用的形象呢？

例如，假设我这样做：

 ＆LT; IMG SRC ='http://img.to/image.jpg\"/>
＆所述; IMG SRC =htt​​p://img.to/image.jpg\"/>
＆所述; IMG SRC =htt​​p://img.to/image.jpg\"/>
＆所述; IMG SRC =htt​​p://img.to/image.jpg\"/>
＆所述; IMG SRC =htt​​p://img.to/image.jpg\"/>
＆所述; IMG SRC =htt​​p://img.to/image.jpg\"/>
...
＆所述; IMG SRC =htt​​p://img.to/image.jpg\"/>
＆所述; IMG SRC =htt​​p://img.to/image.jpg\"/>
 

和image.jpg的为100KB。当浏览器加载这个页面，它会浪费了流量（IMG标签在100Kb *＃）？还是会只装入一张image.jpg的重复使用该标签的休息吗？

解决方案

试试吧 - 寻找到缓存的问题时，就像萤火虫或工具针对Firefox在Chrome的开发者工具是非常有益的。如果打开任一'网'面板，并重新加载页面，你会看到HTTP状态code的每个项目的发送。 304（修改）表示该项目是从缓存中检索本地

由于 dthorpe 上面说，缓存头是很重要的位置。除了确保无缓存还没有确定，如果你有机会到服务器配置你应该积极主动的 - 如果你知道某个资源不会改变，你应该确保无论是设置一个过期头（它告诉浏览器之后，缓存副本应被视为失效日期）或缓存控制：最大年龄报头（其中给出了许多天/小时，而不是一组日期）<。 / p>

您可以设定不同的时间尺度为不同的MIME类型/文件夹也一样，它可以让你获得客户端的数据经常刷新HTML内容，但图像和样式很少。

下面是一个不错的介绍视频/条由谷歌的这是值得一试。

If I use the same image within a single page multiple times, will each load separately, taking up the bandwidth and traffic, or will only one be loaded and rest embed code will reuse the image?

For example, let's say I did this:

<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"/>

and image.jpg is 100kb. When the browser loads this page, will it waste up (100Kb * # of img tags) of traffic? or will it just load one image.jpg and reuse it for the rest of the tags?

解决方案

Try it — when looking into caching issues, a tool like Firebug for Firefox or the Developer Tools within Chrome are very beneficial. If you open the 'Net' panel in either and reload a page, you will see what HTTP status code was sent for each item. 304 (Not modified) means that the item was retrieved locally from the cache.

As dthorpe says above, cache headers are important here. As well as making sure that 'no-cache' hasn't been set, if you have access to your server configuration you should be pro-active — if you know a resource isn't going to change you should make sure to set either an 'Expires' header (which tells browsers a date after which the cached copy should be considered stale) or a 'Cache-Control: max-age' header (which gives a number of days/hours rather than a set date).

You can set different time-scales for different mime-types/folders too, which allows you to get clients data to refresh HTML content often, but images and stylesheets rarely.

Here's a nice intro video/article by Google that's worth checking out.

这篇关于当同一图像的多个实例嵌入HTML，是否加载图像一次？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！