Chrome内存/垃圾收集问题 [英] Chrome Memory/Garbage Collection Issue
问题描述
我在使用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
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 =预览;
img.src =;
s.appendChild（img）;
document.getElementById（DDCont）。appendChild（s）;
loadPreview（img，file）;
}
}
};
函数loadPreview（img，文件）{
var reader = new FileReader（）;
reader.onload = function（e）{
img.src = e.target.result;
}
reader.readAsDataURL（file）
}
函数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）;
函数clearImages（）{
cont = document.getElementById（DDCont）; （cont.childNodes.length> 0）{
cont.removeChild（cont.childNodes [0]）;
while
HTML： p>
< div id =DDContstyle =width：800px; height：600px; border：3px solid＃333333; overflow：汽车;>< / DIV>
< input type =buttonvalue =清晰图像onclick =clearImages（）/>
是的，这对我来说也是一个很大的问题，
似乎现代浏览器不会释放资源，尤其是对于图像。我认为这应该是一个焦点，考虑到大量的Ajax页面，保持状态，并允许用户不刷新页面。幸运的是，对于HTML5视频，您可以通过首先更改src来实现此目的。
video.src =;
video.load（）;
如果您在删除视频元素之前执行此操作，内存将被清除。
不幸的是，我没有找到一种方法来处理图片，如果发现我很想知道。
I am having memory/garbage collection issues with Chrome
I am working on a photo uploading site which allows my client to drag and drop photos to upload using HTML5 and file API, so this wont work in IE. it only works in Chrome and FF. I haven't tested in Safari, Opera yet.
I am not using any JS frameworks and my example is less than 80 lines of code, so it's really easy to follow.
Here is my example: http://seesquaredphoto.com/testPreview.html
If you drag and drop a handful of JPG photos (4-5MB each) into the box you will see the previews load and in windows task manager, you can see the memory usage climb for that window. If you click the "Clear Images" button, the images are deleted.
If you do this in FF, after a few seconds, the memory returns to back what it was before you previewed the images. However in chrome, the memory does not drop.
Any ideas? Am i doing something wrong or is this a chrome bug?
Thanks. Here is the code if you dont want to view source the link above:
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()"/>
Yeah this is a big problem for me as well,
It seems that modern browsers dont free up resources, especially with Images. I think this should be a focus considering the massive amounts of Ajax pages, keeping state, and allowing the user to NOT refresh the page.
Luckily, with HTML5 video, you can achieve this by first changing the src
video.src=" ";
video.load();
If you do this before removing video elements, the memory is cleared.
Unfortunately I have no found a way to do this with Images, If it is found I would love to know.
这篇关于Chrome内存/垃圾收集问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
