Утечка памяти при динамическом обновлении изображения с использованием JavaScript - PullRequest
7 голосов
/ 14 февраля 2011

Я пытаюсь избавиться от неприятной утечки памяти в моем браузере.

Вот что я пытаюсь сделать:
- Я периодически пытаюсь обновить изображение на странице HTMLиспользуя javascript.
- Весь код должен быть совместим с Internet Explorer 6 или выше и Firefox.

Вы можете найти мой код ниже.

Вот что я заметил: каждый раз, когда я опрашиваю новое изображение, кажется, что браузер сохраняет предыдущее изображение в своем кэше.Следовательно, использование памяти chrome9 / Internet Explorer 6 & 8 / Safari 5 продолжает расти линейно во времени.Только firefox (3.6), кажется, ведет себя нормально, когда я добавляю заголовки без кеша к изображению.Я установил достаточно высокую частоту обновления (10 мс) для быстрого увеличения объема памяти.

Что я уже пробовал:
- Добавление заголовков к изображению, которое отключает кеширование: работает только для Firefox
Это заголовок ответа:

HTTP / 1.1 200 OK Дата: Пн, 14 Фев 2011 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: без кэширования Cache-control: без кэширования, без хранения, обязательноrevalidate, max-age = 1, max-stale = 0, post-check = 0, pre-check = 0, max-age = 0 Срок действия истекает: Mon, 14 Feb 2011 11:17:02 GMT Длина контента: 358 Keep-Alive: timeout = 15, max = 100 Соединение: Keep-Alive Content-Type: image / png

-Просмотр изображения в формате строки base64 с помощью метода POST (запросы POST по умолчанию не кэшируются):не имеет значения
-Попытка различных значений, таких как переменные настройки, в null и вызов clearInterval или аналогичных методов.
-Изменение / не изменение изображения namКаждый раз, когда я делаю запрос.
- Загрузка кода ниже в iFrame и обновление iFrame каждые 5 секунд, кажется, очищает память во всех браузерах, кроме 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>

1 Ответ

1 голос
/ 12 апреля 2011

Попробуйте это:

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...