使用javascript动态刷新图像时的内存泄漏

Question

我正在尝试解决浏览器中严重的内存泄漏问题。

这就是我想要做的：
- 我定期尝试使用 javascript 刷新 HTML 页面中的图像。
- 所有代码都应与 Internet Explorer 6 或更高版本和 firefox 兼容。

您可以在下面找到我的代码。

这是我观察到的： 每次我轮询新图像时，浏览器似乎都会将前一个图像保留在其缓存中。因此，chrome9/Internet Explorer 6&8/Safari 5 的内存使用量随着时间的推移呈线性增长。当我向图像添加无缓存标头时，只有 firefox (3.6) 似乎表现正常。我将刷新率设置得非常高（10 毫秒），以便快速查看内存增长。

我已经尝试过的：
- 向禁用缓存的图像添加标题：仅适用于 firefox
这是响应头：

HTTP/1.1 200 正常 日期：2011 年 2 月 14 日星期一 11:17:02 GMT 服务器：Apache/2.2.9 (Debian) PHP/5.2.6-1+lenny9 with Suhosin-Patch mod_python/3.3.1 Python/2.5.2 X-Powered-By: PHP/5.2.6-1+lenny9 Pragma：无缓存 缓存控制：无缓存、无存储、必须重新验证、max-age=1、max-stale=0、post-check=0、pre-check=0、max-age=0 过期时间：2011 年 2 月 14 日星期一 11:17:02 GMT 内容长度：358 保活：超时=15，最大值=100 连接：保持活动 内容类型：图片/png

-通过 POST 方法请求 base64 字符串格式的图像（POST 请求默认不缓存）：没有区别
- 尝试各种方法，例如将变量设置为 null 并调用 clearInterval 或类似方法。
- 每次我提出请求时更改/不更改图像名称。
- 在 iF​​rame 中加载下面的代码并每 5 秒刷新一次 iFrame 似乎可以清理除 IE6 之外的所有浏览器中的内存，因此这不是解决方案。
-许多其他似乎不起作用的事情。

我希望你们中的任何聪明人都可以帮助我。我越来越绝望了=)

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate, max-age=-1, max-stale=0, post-check=0, pre-check=0">
    <meta http-equiv="expires" content="-1">
    <style type="text/css">
        body {
            padding: 0px;
            margin: 0px;
            background-color: #B0B9C0;
        }

        img {
            width: 167px;
            height: 125px;
            background-color: #B0B9C0;
            border: none;
        }
    </style>
    <script type="text/javascript">
        var previewUrl     = "http://nick-desktop/image/";
        var previewImage   = document.createElement("img");
        var previewTimeout = 10;
        var previewWidth   = 200;
        var previewHeight  = 80;
        var timerID = 0;

        function initialize() {
            if(previewTimeout==null || previewUrl == null || previewWidth==null || previewHeight==null) return;
            document.body.appendChild(previewImage);
            previewImage.src = previewUrl;
            previewImage.style.width = previewWidth+"px";
            previewImage.style.height = previewHeight+"px";
            timerID = setInterval(doPoll, previewTimeout);
        }

        function doPoll() {
            previewImage.src = previewUrl + new Date().getTime()+".png";
        }
    </script>
</head>
<body onload="initialize()">
</body>

Answer 1

试试这个：

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate, max-age=-1, max-stale=0, post-check=0, pre-check=0">
    <meta http-equiv="expires" content="-1">
    <style type="text/css">
        body {
            padding: 0px;
            margin: 0px;
            background-color: #B0B9C0;
        }

        img {
            width: 167px;
            height: 125px;
            background-color: #B0B9C0;
            border: none;
        }
    </style>
    <script type="text/javascript">
        var previewUrl     = "http://nick-desktop/image/";
        var previewTimeout = 10;
        var previewWidth   = 200;
        var previewHeight  = 80;
        var timeout;

        window.onload = function() {
            if(previewTimeout==null || previewUrl == null || previewWidth==null || previewHeight==null) return;
            doPoll();
        }

        function doPoll() {
            clearTimeout(timeout);
            document.body.innerHTML = "";
            var previewImage = null;

            previewImage = document.createElement("img");
            previewImage.style.width = previewWidth+"px";
            previewImage.style.height = previewHeight+"px";
            previewImage.onload = function() { timeout = setTimeout(doPoll, previewTimeout); };
            document.body.appendChild(previewImage);

            previewImage.src = previewUrl + "image.png?datetime=" + new Date().getTime();
        }
    </script>
</head>
<body>
</body>
</html>