Question

我的Chrome存在内存/垃圾回收问题

我正在制作照片上传网站，该网站允许我的客户使用HTML5和文件API拖放照片上传，因此这在IE中无法使用。它只适用于Chrome和FF。我还没有在Safari，Opera中测试过。

我没有使用任何JS框架，我的例子不到80行代码，所以很容易理解。

以下是我的示例：http://seesquaredphoto.com/testPreview.html

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

如果在FF中执行此操作，几秒钟后，内存将返回到预览图像之前的状态。但是在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()"/>

Answer 1

是的，这对我来说也是一个大问题，
现代浏览器似乎不会释放资源，尤其是图像。我认为这应该是一个焦点，考虑到大量的Ajax页面，保持状态，并允许用户不刷新页面。

幸运的是，使用HTML5视频，您可以通过首先更改src

来实现此目的

video.src=" ";
video.load();

如果在删除视频元素之前执行此操作，则会清除内存。

不幸的是我找不到用图片做到这一点的方法，如果发现我很想知道。

Answer 2

看起来你的权利，我相信任何DOM删除都会发生，Chrome中没有释放内存。 Canvas也是如此：

http://code.google.com/p/chromium/issues/detail?id=40178

也许您可以提交错误报告（http://crbug.com/new），在您这样做之后，我会酌情让相应的团队进行更多的分类。

谢谢！

Answer 3

显然，这已经在最近的铬版本中得到修复（至少是视频内存泄漏）。

修复程序可以在chrome 49中找到，我相信这是修复它的确切提交：https://chromium.googlesource.com/chromium/src/+/d13710832e9d0e6302cf8388cda94a7a780d8664%5E%21/#F0

这意味着不再需要源黑客。

Chrome内存/垃圾收集问题

3 个答案: