同一圖像加載多次

我在我的網站（啓用JavaScript，並可以強制瀏覽器選擇）的CMS部分頁面時，它是用大量的圖片日曆：同一圖像加載多次

<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技巧可以用來提高性能？

來源

2011-03-09 aaron

這可以是一個瀏覽器的東西，但大多數瀏覽器會檢查圖像的緩存，如果發現它，將在第一次加載後使用它。 – 2011-03-09 03:18:20

應該不成問題。如果您在Safari或Chrome中使用開發人員工具，則應該能夠判斷它是否做得正確。查看Chrome中的網絡標籤或Safari中的資源標籤。 – 2011-03-09 03:32:19

如果它們具有相同的實際路徑，那麼瀏覽器將緩存它們，除非您擁有積極的反高速緩存標題，例如過去的過期標題。

來源

2011-03-09 03:17:42 alex

我認爲這個問題還沒有得到解決。這是相同頁面上的相同圖像。 @ Alex的答案更適合跨多個頁面的同一圖像。

當您在一個頁面內加載同一圖像的多個副本時，瀏覽器不應該關心緩存/過期標頭。它應該重新使用它加載的圖像。

對於此DOM片段：

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

望着在Chrome，Firefox或IE9的網絡選項卡上，你可以看到，只有一個由瀏覽器服務器調用。如果圖像已過期，則圖像將返回，否則您將得到304未修改。

總而言之，在同一頁上有一百張相同圖像的副本不應該有任何開銷，並且過期標題並不重要。

來源

2012-04-30 17:40:43

同一圖像加載多次

回答

相關問題