在DOM中删除图像时如何防止内存泄漏？

Question

webkit中存在一个已知错误,当您从DOM中删除图像时,它不会释放与其关联的内存.

这是单页应用程序经常加载图像的问题.

各种建议解决方案是:

• 在从DOM中删除图像之前删除图像src属性
• 在从DOM中删除图像之前将图像src设置为""
• 在从DOM中删除图像之前,将图像设置为单个像素图像
• 创建有限数量的图像元素并继续回收它们

前三种方法对我不起作用.回收图像元素的主要缺点是它意味着编写大量代码来管理它.我正在通过AJAX加载可能包含图像的新HTML,因此我不一定知道要加载的图像数量.

有没有其他工作来解决这个问题？

Answer 1

我使用了3种不同类型的方法......

首先.添加了一组图像并将垃圾收集留给了浏览器.

它肯定是垃圾收集,但过了一段时间,确保不需要已经创建的图像.

第二.使用数据:图像的src的URI模式.

var s = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";

for (var i = 0; i < 100; i++){
    var img = document.createElement("img");
    img.src = s;
document.getElementById("myList1").appendChild(img);
setTimeout(function(){img = null;}, 1000);
}

这看起来很相似,虽然对我来说有点好,因为我在浏览器前观察并观察到使用较少的内存,垃圾收集几乎与上面相同.

第三.代码中的垃圾收集.

var s = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";

for (var i = 0; i < 100; i++){
    var img = document.createElement("img");
    img.src = "dot.png";  // or the other, both mean the same here.
    img.src = s;
document.getElementById("myList1").appendChild(img);
setTimeout(function(){img = null;}, 1000);
}

在这个短暂的测试时间里,我相信最后一种方法效果更好,因为它几乎可以立即释放空间,而无需等待进一步查看是否需要引用的图像.

总而言之,当你绝对觉得必须释放一些东西时,你最好自己使用垃圾收集.

Answer 2

尝试将 Javascript DOM 树对象设置为“null”。

首先，使用 Chrome 开发人员工具界面之类的工具，在 DOM 树层次结构中找到对象并检查它并找到包含图像二进制文件的对象。

尝试将该对象设置为 null，例如var obj = null;.

这应该告诉 Javascript 子对象不再被引用，并强制释放对象的内存。