我是否应该担心重复图像下载过多？

我有一个简单的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

我是否应该担心重复图像下载过多？

回答

相关问题