雙<img>標記是如何工作的？

Question

我搜索了它，找不到它，抱歉，如果它確實存在。無論如何，這裏是：

我想知道如果你在同一個HTML頁面中加一個<img>標籤會發生什麼。圖像是否下載兩次？瀏覽器是否檢測到並只加載一次？提前致謝。

Answer 1

理論上一些非常愚蠢的瀏覽器（或者對於某些特定的約束沒有緩存或有一個非常小的瀏覽器）可以下載圖像兩次。今天

在實踐正在使用的所有主流瀏覽器有一個高速緩存，其中每下載元素（包括由所加載的頁面引用的元素）通常是儲存以避免下載很多次同樣的事情。

不過，高速緩存的使用情況調節由到期，語用無緩存，緩存控制HTTP標頭（也許數越多，你可以找到所有的頭here）及其元等價的，如果對象是下載的是一個HTML頁面。長話短說，如果Web服務器說某個對象不能被緩存，或者瀏覽器應該遵守一些最大緩存時間。通常，對於靜態內容，除非明確告知，否則web服務器將不提供任何緩存修飾符，因此瀏覽器應緩存圖像並且沒有問題。

Answer 2

除非使用「no-cache」標頭髮送圖像，否則用戶的瀏覽器可能只下載一次圖像。

然而，this answer一個問題關於控制 + F5表明，如果進行「硬刷新」火狐3.5（或更高版本？）會下載資源多次。

Answer 3

這取決於瀏覽器，但（絕大多數）會識別它，並且只下載一次。

如果您希望它下載兩次，您可以隨時包含一個查詢參數，如example.com/image.jpg?unique=1和example.com/image.jpg?unique=2，瀏覽器應該將這些參數視爲單獨的圖像。