javascript - Configurando img.src a dataUrl Leaks Memory
html5 dom (3)
Terminé haciendo un trabajo para solucionar el problema. La saturación de memoria solo ocurre cuando se cambia image.src, por lo que simplemente evité el objeto Image por completo. Hice esto tomando el dataUrl, convirtiéndolo en binario ( https://gist.github.com/borismus/1032746 ) y luego analizándolo usando jpg.js ( https://github.com/notmasteryet/jpgjs ). Utilizando jpg.js puedo copiar la imagen en mi lienzo, por lo que el elemento de la imagen se basa por completo, lo que anula la necesidad de establecer su atributo src.
A continuación, he creado un caso de prueba simple que muestra que cuando src de una etiqueta img se establece en diferentes dataUrls, pierde memoria. Parece que los datos de la imagen nunca se descargan después de que el src se cambie a otra cosa.
<!DOCTYPE html>
<html>
<head>
<title>Leak Test</title>
<script type="text/javascript">
canvas = null;
context = null;
image = null;
onLoad = function(event)
{
canvas = document.getElementById(''canvas'');
context = canvas.getContext(''2d'');
image = document.getElementById(''image'');
setTimeout(processImage, 1000);
}
processImage = function(event)
{
var imageData = null;
for (var i = 0; i < 500; i ++)
{
context.fillStyle = "rgba(" + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.random() +")";
context.fillRect(0, 0, canvas.width, canvas.height);
imageData = canvas.toDataURL("image/jpeg", .5);
image.src = imageData;
}
setTimeout(processImage, 1000);
}
</script>
</head>
<body onload="onLoad(event)">
<canvas id="canvas"></canvas>
<img id="image"></img>
</body>
</html>
Si carga esta página html, el uso de RAM se genera con el tiempo y nunca se limpia. Este problema se ve muy similar: la actualización rápida de la imagen con URI de datos causa el almacenamiento en memoria caché y la pérdida de memoria . ¿Hay algo que pueda hacer para evitar esta pérdida de memoria?
También estoy experimentando este problema y creo que es un error del navegador. Veo que esto también sucede en FF y Chrome. Al menos, Chrome una vez tuvo un error similar que se solucionó. Creo que no se ha ido o no se ha ido por completo. Veo un incremento constante en la memoria cuando configuro img.src repetidamente en imágenes únicas . He archivado un error con Chromium, si quieres darle más peso :) https://code.google.com/p/chromium/issues/detail?id=309543&thanks=309543&ts=1382344039 (El ejemplo de activación de error no necesariamente generar una nueva imagen única cada vez, pero al menos lo hace con una alta probabilidad)
También experimenté esta pérdida de memoria y encontré una solución alternativa. Estoy usando Electron v1.7.9 y react v15.6.1 .
Solución
En lugar de usar la etiqueta img , utilicé div con una imagen de fondo codificada como URI de formato base64 ( data:image/png;base64, ):
<div style="background:url(''image_url'');width:100px;height:100px"></div>
Esta solución no pierde memoria.