html - 重复加载相同的图像

Question

我网站的 cms 部分有一个页面(启用了 javascript 并且可以强制选择浏览器)，它是一个包含大量图像的日历:

<img src='1.gif' />
<img src='1.gif' />
<img src='1.gif' />
<img src='1.gif' />

<img src='2.gif' />
<img src='2.gif' />
<img src='2.gif' />
<img src='2.gif' />

同一张图片可以使用超过 250 次，页面上大约有 1000-1500 张图片。

浏览器是否足够聪明，可以识别出这些都是相同的图像，或者是否有一些我可以用来提高性能的 JavaScript/jQuery 技巧？

Answer 1

我认为这个问题有一个微妙之处尚未得到解决。这是同一页面上的同一图片。 @Alex 的回答更适合跨多个页面的同一图片。

当您在一个页面中加载同一图像的多个副本时，浏览器不应该关心缓存/过期 header 。它应该只是重新使用它加载的图像。

对于这个 DOM 片段:

<img src='1.gif' />
<img src='1.gif' />

查看 Chrome、Firefox 或 IE9 中的网络选项卡，您可以看到浏览器对服务器的调用只有一次。如果图像已过期，则返回图像，否则您将收到 304 未修改。

简而言之，在同一页面上放置一百份相同图像应该不会产生任何开销，并且过期 header 无关紧要。