3

我有一个带有一些 javascript 的简单 HTML 页面，它不断地为图像控件提供来自相机的图像。我担心的是，当我在 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]中，缓存会认为它是一个新图像。

您可以在网络上的任何图像上实际测试这一点，方法是使用查询字符串中的另一个图像 URL camurl。不一定必须是相机来测试这种情况。

更新

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

4

1 回答 1

2

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

如果您确实继续捏造 url，浏览器不应该崩溃，但是当它达到容量时，您将强制（有用的）资源从缓存中取出。

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

如果问题是您的图像源不包含缓存控制标头并且您无法修改它，请考虑使用HttpHeadersMore模块通过nginx代理图像，这将允许您以任何您喜欢的方式装饰响应。

值得注意的是，Firebug/Chrome 开发工具将（最终）在收到足够多的请求时死掉。

于 2013-05-09T23:06:58.270 回答