双<img/>标记如何工作​​？

Question

我搜索了它并找不到它，抱歉，如果确实存在的话。无论如何，这里是：

我想知道如果你在同一个HTML页面中加倍<img>标记会发生什么。图像下载两次吗？浏览器是否检测到并仅加载一次？提前谢谢。

Answer 1

理论上一些非常愚蠢的浏览器（或者某些特定约束的浏览器没有缓存或者有一个非常小的浏览器）可以下载两次图像。

在实践中，今天使用的所有主要浏览器都有一个缓存，其中通常存储每个下载的元素（包括正在加载的页面引用的元素）以避免下载多次相同的事情。

仍然，缓存的使用受Expires，Pragma no-cache，Cache-control HTTP标头（可能还有一些，你可以找到所有标题here）及其元等效项的调节。正在下载的对象是一个HTML页面。

长话短说，如果Web服务器说某个对象不能被缓存或者浏览器应该遵守一些最大缓存时间。通常，对于静态内容，除非明确告知，否则Web服务器将不提供任何缓存修饰符，因此浏览器应缓存图像和合作没有问题。

Answer 2

除非您的图片是使用“no-cache”标头发送的，否则如果图像同时使用相同的网址，则用户的浏览器可能只会下载图像一次。

然而，this answer关于 Control + F5 的问题表明Firefox 3.5（及更高版本？）会下载资源如果执行“硬刷新”，则多次。

Answer 3

这取决于浏览器，但（绝大多数）会识别它，并且只下载一次。

如果您希望它下载两次，则可以始终包含查询参数，例如example.com/image.jpg?unique=1和example.com/image.jpg?unique=2，浏览器应将其视为单独的图像。