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

Question

I have a simple HTML page with some javascript that continuously feeds an image control with images from a camera. 我有一个简单的HTML页面，其中包含一些javascript，可以使用相机中的图像连续提供图像控件。 My concern is that when I'm in Google Chrome, and am looking at the Resources, it is filling up with the same image filename over and over - every new refreshed image seems to be creating a copy. 我担心的是，当我在谷歌浏览器中，并且正在查看资源时，它一遍又一遍地填充相同的图像文件名 - 每个新刷新的图像似乎都在创建副本。

Should I be worried about this? 我应该担心吗？ Is there a possibility that something might happen such as cache full or anything along those lines? 是否有可能发生某些事情，例如缓存已满或沿着这些行？ Or would browsers respect this and handle it accordingly? 或者浏览器会尊重它并相应地处理它？

Just now, as I'm typing this question, Google Chrome's dev panel disappeared on this page of mine, as if it did in fact get overloaded with images. 刚才，当我输入这个问题时，谷歌Chrome的开发面板在我的这个页面上消失了，好像它实际上已经超载了图像。 So I'm assuming this is not good. 所以我假设这不好。 However the stream of images does continue to work as designed. 然而，图像流确实继续按设计工作。

Currently it's on 2 frames per second, and here's my code: 目前它是每秒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>

And a sample call to this page: 以及对此页面的示例调用：

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

Note that I am using a trick for the cache - in the function NewUrl() I'm adding #time=[datetime] so that the cache will think it's a new image. 请注意，我正在使用缓存技巧 - 在函数NewUrl()我添加了NewUrl() #time=[datetime]以便缓存会认为它是一个新图像。

You can test this actually on any image on the net, by using another image URL than the camurl in the query string. 您可以使用查询字符串中的camurl之外的其他图像URL，对网络上的任何图像进行实际测试。 Doesn't necessarily have to be a camera to test this scenario. 不一定必须是相机来测试这种情况。

UPDATE UPDATE

After running for 20 hours now, I have no issues at all in the web browser (Google Chrome) at a frame rate of 3 fps. 现在运行了20个小时后，我在网络浏览器（谷歌浏览器）中没有任何问题，帧速率为3 fps。 That's ~3,600 frames, each being ~165 KB. 那是~3,600帧，每帧约为165 KB。 So that makes it over half a gig downloaded - with no issues in the browser at all. 这样就可以下载超过一半的演出 - 在浏览器中完全没有问题。 But the dev tools crashed not even 30 minutes after being opened. 但开发工具在开放后30分钟就没有崩溃。

Answer 1

If the Url is the same for each image, it should work with no issues whatsoever as the new image will replace the old in the cache. 如果每个图像的Url相同，则它应该没有任何问题，因为新图像将替换缓存中的旧图像。 The problem you're likely to hit is that you don't ever want the image retrieved from the cache, hence fudging the urls. 您可能遇到的问题是您不希望从缓存中检索图像，从而捏造网址。

If you do continue to fudge the urls, the browser shouldn't crash but you will force (useful) resources out of the cache when it reaches capacity. 如果你还继续捏造的网址，浏览器应该不会崩溃，但你将迫使（有用的）资源从缓存中，当它达到容量。

The ideal solution is to set the appropriate cache-control headers when retrieving the image to tell the browser not to store the image. 理想的解决方案是在检索图像时设置适当的cache-control标头，以告知浏览器不要存储图像。

If the issue is that your source for the images doesn't include cache control headers and you can't modify it, consider proxying the image through nginx with the HttpHeadersMore module which would allow you to decorate the response any way you like. 如果问题是您的图像源不包含缓存控制头而您无法修改它，请考虑使用HttpHeadersMore模块通过nginx代理图像，这样您就可以按照自己喜欢的方式装饰响应。

It's worth noting that Firebug/Chrome dev tools will die (eventually) with enough requests. 值得注意的是，Firebug / Chrome开发工具将（最终）有足够的请求。

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

问题描述

1 个解决方案

解决方案1
2 已采纳 2013-05-09 23:06:58

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2013-05-09 23:06:58

解决方案1
2 已采纳 2013-05-09 23:06:58