Fuga de memoria al actualizar dinámicamente una imagen usando javascript

Estoy tratando de deshacerme de una desagradable pérdida de memoria en mi navegador.Fuga de memoria al actualizar dinámicamente una imagen usando javascript

Esto es lo que estoy tratando de hacer:
- Estoy tratando periódicamente de actualizar una imagen en una página HTML usando javascript.
- Todo el código debe ser compatible con Internet Explorer 6 o superior y Firefox.

Puede encontrar mi código a continuación.

Esto es lo que observé: Cada vez que sondeo una nueva imagen, parece que el navegador mantiene la imagen anterior en su caché. Por lo tanto, el uso de memoria de chrome9/Internet Explorer 6 & 8/Safari 5 sigue creciendo linealmente. Solo Firefox (3.6) parece comportarse de manera normal cuando agrego encabezados que no son de caché a la imagen. Establecí la frecuencia de actualización bastante alta (10 ms) para ver rápidamente cómo crecía la memoria.

lo que ya intentado:
cabeceras -Adición a la imagen que desactiva el almacenamiento en caché: sólo funciona para Firefox
Esta es la cabecera de respuesta:

HTTP/1.1 200 OK Fecha: Lunes, 14 Feb 2011 11:17:02 GMT Servidor: Apache/2.2.9 (Debian) PHP/5.2.6-1 + lenny9 con Suhosin-Patch mod_python/3.3.1 Python/2.5.2 X-Powered-By: PHP /5.2.6-1+lenny9 Pragma: no-cache Control de caché: sin caché, sin almacenamiento, debe revalidar, max-age = 1, max-stale = 0, post-check = 0, pre -check = 0, max -age = 0 Expira: Mon, 14 Feb 2011 11:17:02 GMT Content-Length: 358 Keep-Alive: timeout = 15, max = 100 Conexión: Keep-Alive Tipo de contenido: image/png

-solicitando la imagen en formato de cadena base 64 a través de un método POST (POST peticiones son por defecto no en caché): no hace ninguna diferencia
-tratando varias cosas como las variables de configuración en null y llamando clearInterval o métodos similares.
-Cambio/no cambio del nombre de la imagen cada vez que realizo una solicitud.
- Cargar el código siguiente en un iFrame y actualizar el iFrame cada 5 segundos parece limpiar la memoria en todos los navegadores, excepto en IE6, por lo que esta no es una solución.
-Muchas otras cosas que no parecen funcionar.

Espero que cualquiera de ustedes, muchachos inteligentes, pueda ayudarme. Me estoy bastante desesperada =)

<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>

Fuente

2011-02-14 Nick

¿Ha intentado quitar la vieja imagen del DOM antes de actualizarlo? parent.removeChild (elemToRemove) – chriszero

Lo hice. Quité la imagen del DOM y luego creé una nueva imagen para reemplazarla. Dio el mismo resultado. – Nick

Logré cerrar la fuga en IE sin embargo. Cambié el tipo de imagen de PNG a JPEG. Eso pareció arreglarlo. – Nick

Prueba esto:

<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>

Fuente

2011-04-12 09:07:46

Fuga de memoria al actualizar dinámicamente una imagen usando javascript

Respuesta

Cuestiones relacionadas