我在使用 Chrome 时遇到内存/垃圾收集问题
我正在开发一个照片上传网站，该网站允许我的客户使用 HTML5 和文件 API 拖放照片进行上传，因此这在 IE 中不起作用。它仅适用于 Chrome 和 FF。我还没有在 Safari、Opera 中测试过。
我没有使用任何 JS 框架，并且我的示例不到 80 行代码，因此非常容易理解。
这是我的例子：http://seesquaredphoto.com/testPreview.html http://seesquaredphoto.com/testPreview.html
如果您将一些 JPG 照片（每张 4-5MB）拖放到框中，您将看到预览加载，并且在 Windows 任务管理器中，您可以看到该窗口的内存使用量攀升。如果单击“清除图像”按钮，图像将被删除。
如果您在 FF 中执行此操作，几秒钟后，内存将恢复到预览图像之前的状态。然而在chrome中，内存并没有下降。
有任何想法吗？我做错了什么还是这是一个 chrome bug？
谢谢。
如果您不想查看上面链接的源代码，请使用以下代码：
JavaScript:
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]);
}
}
HTML:
<div id="DDCont" style="width:800px; height:600px; border:3px solid #333333; overflow:auto;"></div>
<input type="button" value="Clear Images" onclick="clearImages()"/>
