Question

我有一个简单的HTML页面，其中包含一些javascript，可以使用相机中的图像连续提供图像控件。我担心的是，当我在谷歌浏览器中，并且正在查看资源时，它一遍又一遍地填充相同的图像文件名 - 每个新刷新的图像似乎都在创建副本。

我应该担心这个吗？是否有可能发生某些事情，例如缓存已满或沿着这些行？或者浏览器是否会尊重它并相应地处理它？</ p>

刚才，当我输入这个问题时，Google Chrome的开发面板在我的这个页面上消失了，好像它实际上已经超载了图像。所以我假设这不好。然而，图像流确实继续按设计工作。

目前它是每秒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之外的其他图片网址，对网络上的任何图片进行实际测试。不一定要用相机来测试这种情况。

更新

现在运行了20个小时后，我在网络浏览器（谷歌浏览器）中没有任何问题，帧速率为3 fps。那是~3,600帧，每帧约为165 KB。这样就可以下载超过一半的演出 - 在浏览器中完全没有问题。但开发工具在打开后30分钟就崩溃了。

Answer 1

如果每个图像的Url相同，则它应该没有任何问题，因为新图像将替换缓存中的旧图像。您可能遇到的问题是您不希望从缓存中检索图像，从而捏造网址。

如果您做继续捏造网址，浏览器不应该崩溃，但是当它达到容量时，您将强制（有用）资源从缓存中删除。

理想的解决方案是在检索图像时设置适当的cache-control标题，告诉浏览器不要存储图像。

如果问题是您的图片来源不包含缓存控制标头而您无法对其进行修改，请考虑使用nginx模块通过HttpHeadersMore代理图片，以便您以你喜欢的方式装饰反应。

值得注意的是，Firebug / Chrome开发工具将会（最终）有足够的请求死亡。

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

1 个答案: