重复加载相同的图像

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的答案更适合跨多个页面的同一图像的情况。

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

对于这个DOM片段：

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

查看Chrome，Firefox或IE9中的网络标签，您可以看到浏览器只有一次调用服务器。如果图像已过期，则返回图像，否则您将获得304 Not modified。

简而言之，在同一页面上拥有相同图像的一百份副本应该没有任何开销，并且到期标题无关紧要。

Answer 2

如果它们具有相同的实际路径，则浏览器将缓存它们，除非您具有积极的反缓存标头，例如过去的过期标头。