У меня проблемы с памятью / сборкой мусора в Chrome
Я работаю над сайтом для загрузки фотографий, который позволяет моему клиенту перетаскивать фотографии для загрузки с использованием HTML5 и файлового API, поэтому в IE это не сработает. это работает только в Chrome и FF. Я еще не тестировал в Safari, Opera.
Я не использую какие-либо JS-фреймворки, и мой пример содержит менее 80 строк кода, поэтому очень легко следовать.
Вот мой пример: http://seesquaredphoto.com/testPreview.html
Если вы перетащите несколько фотографий JPG (4-5 МБ каждая) в поле, вы увидите загрузку предварительного просмотра, а в диспетчере задач 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()"/>