logo标签列表

使用JavaScript动态刷新图像时出现内存泄漏问题

javascriptimagememorybrowsertimer
7

我正在努力消除浏览器中的一个严重的内存泄漏问题。

这是我的尝试：
- 我正在使用JavaScript定期尝试刷新HTML页面中的图像。
- 所有代码应与Internet Explorer 6或更高版本和Firefox兼容。

以下是我的代码：

这是我的观察结果： 每次我轮询新图像时，浏览器似乎会将上一个图像保留在其缓存中。因此，Chrome9 / Internet Explorer 6＆8 / Safari 5的内存使用情况会随时间线性增长。只有Firefox（3.6）在添加no-cache标头到图像时表现正常。我将刷新速率设置得很高（10ms），以便快速查看内存增长。

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

HTTP/1.1 200 OK Date: Mon, 14 Feb 2011 11:17:02 GMT Server: 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: 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 Content-Type: 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>

在更新图片之前，您尝试过从DOM中删除旧图片吗？parent.removeChild(elemToRemove) - chriszero
我这样做了。我从DOM中删除了图像，然后创建了一个新的图像来替换它。结果是相同的。 - Nick
我成功地解决了IE的漏洞。我将图像类型从PNG更改为JPEG。这似乎修复了它。 - Nick
1个回答
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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接