Javascript Chrome内存/垃圾收集问题
我的Chrome存在内存/垃圾收集问题 我正在一个照片上传网站上工作,它允许我的客户使用HTML5和文件API拖放照片上传,所以这在IE中不起作用。它只在Chrome和FF中起作用。我还没考过狩猎和歌剧 我没有使用任何JS框架,我的示例的代码不到80行,因此很容易理解 以下是我的例子: 如果将少量JPG照片(每张4-5MB)拖放到框中,您将看到预览加载,并且在windows任务管理器中,您可以看到该窗口的内存使用率上升。如果单击“清除图像”按钮,图像将被删除 如果在FF中执行此操作,几秒钟后,内存将恢复到预览图像之前的状态。然而,在chrome中,内存不会下降 有什么想法吗?我是做错了什么还是这是一个chrome bug 谢谢。 如果您不想查看上面的源代码链接,请参阅以下代码: Javascript:Javascript Chrome内存/垃圾收集问题,javascript,memory,google-chrome,garbage-collection,Javascript,Memory,Google Chrome,Garbage Collection,我的Chrome存在内存/垃圾收集问题 我正在一个照片上传网站上工作,它允许我的客户使用HTML5和文件API拖放照片上传,所以这在IE中不起作用。它只在Chrome和FF中起作用。我还没考过狩猎和歌剧 我没有使用任何JS框架,我的示例的代码不到80行,因此很容易理解 以下是我的例子: 如果将少量JPG照片(每张4-5MB)拖放到框中,您将看到预览加载,并且在windows任务管理器中,您可以看到该窗口的内存使用率上升。如果单击“清除图像”按钮,图像将被删除 如果在FF中执行此操作,几秒钟后,内
var upload = {
uploadFiles : function(event) {
var files = event.dataTransfer.files;
event.stopPropagation();
event.preventDefault();
var imageType = /image.*/;
for (var x = 0; x < files.length; x++) {
var file = files.item(x);
if (!file.type.match(imageType) || file.fileName.toUpperCase().indexOf(".JPG")!=file.fileName.length-4) {
continue;
}
var s = document.createElement("span");
s.className = "imgS";
var img = document.createElement("img");
img.className = "preview";
img.src = "";
s.appendChild(img);
document.getElementById("DDCont").appendChild(s);
loadPreview(img,file);
}
}
};
function loadPreview(img,file){
var reader = new FileReader();
reader.onload = function(e) {
img.src = e.target.result;
}
reader.readAsDataURL(file)
}
function init(){
var container = document.getElementById('DDCont');
container.addEventListener("dragenter", function(event) {
event.stopPropagation();
event.preventDefault();
},
false
);
container.addEventListener("dragover", function(event) {
event.stopPropagation();
event.preventDefault();
},
false
);
container.addEventListener("dragleave", function(event) {
event.stopPropagation();
event.preventDefault();
},
false
);
container.addEventListener("drop", upload.uploadFiles, false);
}
function clearImages(){
cont = document.getElementById("DDCont");
while(cont.childNodes.length>0) {
cont.removeChild(cont.childNodes[0]);
}
}
var upload={
上载文件:函数(事件){
var files=event.dataTransfer.files;
event.stopPropagation();
event.preventDefault();
var imageType=/image.*/;
对于(var x=0;x0){
cont.removeChild(cont.childNodes[0]);
}
}
HTML:
<div id="DDCont" style="width:800px; height:600px; border:3px solid #333333; overflow:auto;"></div>
<input type="button" value="Clear Images" onclick="clearImages()"/>
看来你是对的,我相信任何DOM删除都会发生这种情况,Chrome不会释放内存。画布也会发生同样的情况: 也许你可以提交一份bug报告(http://crbug.com/new),然后,我将抄送适当的团队进行更多的分类
谢谢 是的,这对我来说也是个大问题,
现代浏览器似乎无法释放资源,尤其是图像。我认为这应该是一个重点,考虑到大量的Ajax页面,保持状态,并允许用户不刷新页面 幸运的是,使用HTML5视频,您可以通过首先更改src来实现这一点
video.src=" ";
video.load();
如果在删除视频元素之前执行此操作,则会清除内存
不幸的是,我还没有找到一种方法来处理图像,如果找到了,我很想知道。显然,chromium的最新版本已经修复了这一问题(至少是视频内存泄漏) 修复程序可以在chrome 49中找到,我相信这正是修复它的提交:
这意味着不再需要源代码破解。在此处发布您的代码。10%的SO用户都在iOS上,看不见。根据Radek的评论,StackOverflow应该是独立的。可以删除或移动外部链接。一般来说,人们不应该去其他地方阅读你的问题。你在哪里删除事件侦听器?仅仅因为你从DOM中删除了一个元素并不意味着所有的事件都会被抛出。提交了bug感谢添加了适当的标签。很高兴看到你抽出时间回答了一个老问题。尽管假定的修复可能有助于解决问题-但最好在回答中包含修复/解决方案的关键方面,这样即使链接断开,你的回答仍然是有用的。嘿@ishmaelMakitla铬中隐含了修复,这只是意味着问题不应再发生。该链接只是一个参考,以防你想做额外的调查。