Chrome 内存/垃圾收集问题答案

【问题标题】：Chrome Memory/Garbage Collection IssueChrome 内存/垃圾收集问题
【发布时间】：2011-02-04 22:26:46
【问题描述】：

我在使用 Chrome 时遇到内存/垃圾收集问题

我正在开发一个照片上传网站，它允许我的客户拖放照片以使用 HTML5 和文件 API 上传，所以这在 IE 中不起作用。它仅适用于 Chrome 和 FF。我还没有在 Safari、Opera 中测试过。

我没有使用任何 JS 框架，而且我的示例代码不到 80 行，因此非常容易上手。

这是我的例子：http://seesquaredphoto.com/testPreview.html

如果您将少量 JPG 照片（每张 4-5MB）拖放到框中，您将看到预览加载，并且在 Windows 任务管理器中，您可以看到该窗口的内存使用量攀升。如果单击“清除图像”按钮，图像将被删除。

如果您在 FF 中执行此操作，几秒钟后，内存将恢复到您预览图像之前的状态。但是在 chrome 中，内存并没有下降。

有什么想法吗？我做错了什么还是这是一个 chrome 错误？

谢谢。如果您不想查看上面链接的源代码，请使用以下代码：

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()"/>

【问题讨论】：