Html 重复加载同一图像

我的网站的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技巧可以用来提高性能？

如果它们具有相同的实际路径，那么浏览器将缓存它们，除非您有激进的反缓存头，例如过去的到期标题。

我认为这个问题有一个尚未解决的微妙之处。在相同的页面上是相同的图像@Alex的回答更适合于在多个页面上显示相同图像的情况

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

对于此DOM片段：

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

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

---

简言之，在同一页面上有100份相同图像的副本应该不会有任何开销，过期标题也不重要。

这可能是每个浏览器的事情，但大多数浏览器都会检查缓存中的图像，如果它找到了，会在第一次加载后使用。这应该不是问题。如果您在Safari或Chrome中使用开发人员工具，您应该能够判断它是否在做正确的事情。查看Chrome中的网络选项卡，或Safari中的资源选项卡。