Chrome中的CreateObjectURL內存泄漏

Question

我正在開發一個Web應用程序，每個人都可以直接在互聯網上編輯圖像。

在開發網站時，我遇到了打開本地系統文件的一個大問題。

通常，我們可以通過以下已知的兩種方式來實現。

首先，使用FileReader 。

// render the image in our view
function renderImage(file) {

  // generate a new FileReader object
  var reader = new FileReader();

  // inject an image with the src url
  reader.onload = function(event) {
    the_url = event.target.result
    $('#some_container_div').html("<img src='" + the_url + "' />")
  }

  // when the file is read it triggers the onload event above.
  reader.readAsDataURL(file);
}

// handle input changes
$("#the-file-input").change(function() {
    console.log(this.files)

    // grab the first image in the FileList object and pass it to the function
    renderImage(this.files[0])
});

第二，使用createObjectURL和revokeObjectURL。

   window.URL = window.URL || window.webkitURL;

var fileSelect = document.getElementById("fileSelect"),
    fileElem = document.getElementById("fileElem"),
    fileList = document.getElementById("fileList");

fileSelect.addEventListener("click", function (e) {
  if (fileElem) {
    fileElem.click();
  }
  e.preventDefault(); // prevent navigation to "#"
}, false);

function handleFiles(files) {
  if (!files.length) {
    fileList.innerHTML = "<p>No files selected!</p>";
  } else {
    fileList.innerHTML = "";
    var list = document.createElement("ul");
    fileList.appendChild(list);
    for (var i = 0; i < files.length; i++) {
      var li = document.createElement("li");
      list.appendChild(li);

      var img = document.createElement("img");
      img.src = window.URL.createObjectURL(files[i]);
      img.height = 60;
      img.onload = function() {
        window.URL.revokeObjectURL(this.src);
      }
      li.appendChild(img);
      var info = document.createElement("span");
      info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
      li.appendChild(info);
    }
  }
}

就我而言，它們都無法在Chrome瀏覽器中正常運行。 （IE很好）我可以使用它們打開本地文件。 但是，即使我在第二種方式使用時完全調用了revokeObjectURL ，那些總會使內存泄漏。

我已經檢查過blob從chrome://blob-internals/中釋放得很好。 所有blob都釋放得很好。 但是，Chrome仍然保留了物理內存，並且除非我刷新頁面，否則內存不會永久釋放。 最終，當內存使用量高達1.5GB時，Chrome崩潰了。

盡管我發布了refs， FileReader向我展示了相同的結果。 此外，這種方式表現出可怕的I / O性能。

http://ecobyte.com/tmp/chromecrash-1a.html （由logidelic提供）

這是一個測試頁面。 您只需將文件拖放到綠色DOM上即可測試此問題。 測試頁面使用createObjectURL / revokeObjectURL方法。

執行此測試時，您可以從任務管理器（Shift + ESC）或您自己的OS任務管理器中查看物理內存消耗。

我錯過了什么或者它是一個眾所周知的錯誤？

拜托，有人幫幫我！ 如果你知道解決這個問題的另一種方法，請告訴我。

Answer 1

我對createObjectURL方法有同樣的問題。 最后，我發現可以通過在onload函數中添加代碼來釋放內存：

this.src = '';

但是，正如您所料，圖像將從網頁中消失。 另外，我還注意到有時chrome（50.0.2661.102）或chrome canary（52.0.2740.0）即使使用this.src =''也無法釋放內存。 一旦發生，您需要重新啟動chrome。 只需刷新頁面不起作用。

我也嘗試過readAsDataURL方法。 內存可以很好地釋放（即使chrome無法使用this.src =''釋放createObjectURL的內存。）然而，缺點是速度相當慢（與createObjectURL相比延長了大約10倍）。