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

Question

我正试图摆脱浏览器中令人讨厌的内存泄漏。

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

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

这就是我观察到的：每次我轮询一个新图像时，浏览器似乎都将前一个图像保存在其缓存中。 因此，chrome9 / Internet Explorer 6和8 / Safari 5的内存使用率在时间上保持线性增长。 当我向图像添加no-cache标头时，只有firefox（3.6）似乎表现正常。 我已经将刷新率设置得相当高（10ms），以便快速查看内存增长情况。

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

HTTP / 1.1 200 OK日期：2011年2月14日星期一11:17:02 GMT服务器：Apache / 2.2.9（Debian）PHP / 5.2.6-1 + lenny9与Suhosin-Patch mod_python / 3.3.1 Python / 2.5。 2 X-Powered-By：PHP / 5.2.6-1 + lenny9 Pragma：no-cache Cache-control：no-cache，no-store，must-revalidate，max-age = 1，max-stale = 0，post -check = 0，pre-check = 0，max-age = 0 Expires：Mon，14 Feb 2011 11:17:02 GMT Content-Length：358 Keep-Alive：timeout = 15，max = 100 Connection：Keep-Alive内容类型：image / png

- 通过POST方法以base64字符串格式请求图像（POST请求默认不缓存）：没有区别
- 将设置变量之类的各种内容称为null并调用clearInterval或类似方法。
- 每次我提出请求时，更改/不更改图像名称。
- 在iFrame中加载以下代码并每隔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>