我是否應該擔心重複圖像下載過多？

我有一個簡單的HTML頁面，其中包含一些JavaScript，它可以連續從圖像中提供圖像控件。我擔心的是，當我使用谷歌瀏覽器，並且正在查看資源時，它會反覆填充相同的圖像文件名 - 每一個新的刷新圖像似乎都在創建一個副本。我是否應該擔心重複圖像下載過多？

我應該爲此擔心嗎？是否有可能發生某些事情，如緩存已滿或沿着這些行發生了什麼？或者瀏覽器是否會尊重這一點並相應地處理它？

就在我輸入這個問題時，谷歌瀏覽器的開發面板在我的這個頁面上消失了，就好像它實際上超載了圖像一樣。所以我認爲這不好。然而，圖像流仍按設計繼續工作。

目前，它是每秒2幀，這裏是我的代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Camera View</title> 
    <script type="text/javascript" language="javascript"> 
     var camurl = ""; 
     var fps = 1; 
     var loop = null; 

     onload = function() { 
      camurl = getParameterByName('camurl'); 
      fps = getParameterByName('fps');    
      LoopProc(); 
     } 

     onunload = function() { 
      if (loop != null) 
       clearTimeout(loop); 
     } 

     function getParameterByName(name) { 
      name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]"); 
      var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"), 
       results = regex.exec(location.search); 
      return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); 
     } 

     function DelayTime() { 
      if (fps < 1) fps = 1; 
      return (1000/fps); 
     } 

     function NewUrl() { 
      return camurl + "#time=" + new Date().getTime(); 
     } 

     function LoopProc() { 
      document.getElementById("CamImage").src = NewUrl(); 
      loop = setTimeout('LoopProc();', DelayTime()); 
     } 
    </script> 
</head> 
<body> 
    <img id="CamImage" src="" alt="" /> 
</body> 
</html>

和樣本調用此頁：

http://localhost:8081/?fps=2&camurl=http://192.168.1.150/image.jpg

請注意，我用的一招了高速緩存 - 在函數NewUrl()中，我添加了#time=[datetime]，這樣緩存就會認爲它是一個新圖像。

您可以通過在查詢字符串中使用除camurl之外的另一圖像URL，在網絡上的任何圖像上實際測試此項。不一定非得是相機才能測試這種情況。

UPDATE

現在20小時運行後，我沒有任何問題，都在3 fps的幀速率的網絡瀏覽器（谷歌瀏覽器）。這是~3600幀，每個〜165KB。因此，這使得它下載了超過半個gig - 在瀏覽器中根本沒有問題。但是開發工具在開啓後不到30分鐘就崩潰了。

來源

2013-05-09 Jerry Dodge

所以這是正常的行爲，並且每個圖像確實被緩存。但瀏覽器應該能夠處理，如果它崩潰，我會感到驚訝。 – bfavaretto 2013-05-09 00:39:46

這就是我期望聽到的，我只是尋找技術洞察力，爲什麼它會/不會工作。 – 2013-05-09 00:40:31

這將是一個硬盤問題我認爲，我不認爲有任何內存（是的，除了指針） – Sebas 2013-05-09 00:46:32

如果每個圖像的Url都是相同的，它應該沒有任何問題，因爲新圖像將替換緩存中的舊圖像。您可能遇到的問題是，您不希望從緩存中檢索圖像，因此欺騙了網址。

如果你做繼續欺騙網址，瀏覽器不應該崩潰，但是當你的資源達到容量時，你會強制（有用的）資源離開緩存。

理想的解決方案是在檢索圖像時設置適當的cache-control標題，以告訴瀏覽器不要存儲圖像。

如果問題是您的圖片來源不包含緩存控制標題，並且您無法對其進行修改，請考慮使用HttpHeadersMore模塊通過nginx代理圖片，該模塊允許您以任何方式裝飾響應喜歡。

值得一提的是，Firebug/Chrome開發工具將會在最終的請求中死掉。

來源

2013-05-09 23:06:58 Basic

其實我使用我的網絡服務器作爲網關/中央接入點連接到所有的攝像頭 - 而不是直接連接到每個URL。因此，我確實控制了標頭 - 通過中央控制器服務器，因爲相機本身不能修改:)那麼他們可以，但這是一個固件破解，我不願意嘗試 – 2013-05-09 23:11:29

啊，我以爲你直接打相機。如果你可以調整標題，添加適當的緩存控制，不要欺騙網址 - 你應該沒有問題。 – Basic 2013-05-09 23:12:23

你可以假設，因爲我的上面的例子有一個直接的IP地址，但是真的地址太長了，所以我把它重新寫入了一個簡單的直接路徑。 – 2013-05-09 23:13:53

我是否應該擔心重複圖像下載過多？

回答

相關問題