javascript - window.URL.revokeObjectURL() 不会立即释放内存(或根本不释放)？

Question

我正在制作一个 html 界面，通过拖放和多选文件在服务器上上传图像。我想在将图片发送到服务器之前显示这些图片。所以我首先尝试使用 FileReader 但我遇到了一些问题，例如 this post .所以我改变了我的方式，我决定使用 blob:url 就像 ebidel 在帖子中推荐的那样，使用 window.URL.createObjectURL() 和 window.URL.revokeObjectURL()释放内存。

但是现在，我遇到了另一个问题，类似于this one .我希望客户可以根据需要一次上传 200 张图像。但是浏览器崩溃了，使用的ram非常高!所以我想可能是同时显示的图像太多了，我用一个数组设置了一个文件等待队列的系统，以便一次只处理 10 个文件。但是问题还是出现了。

在 Google Chrome 上，如果我检查 chrome://blob-internals/ 文件(通常已经由 window.URL.revokeObjectURL() 发布)是大约延迟 8 秒后释放。在 Firefox 上我不确定，但似乎文件没有发布(我检查了 about:memory -> images for that)

是我的代码不好，还是一个与我无关的问题？是否有强制导航器立即释放内存的解决方案？如果它能有所帮助，这就是出现问题的 JavaScript 部分:链接已过期，因为代码未包含在问题中。

编辑

这是一种自己的回答+对bennlich的回答(太长的评论文字)

我从 user1835582 的回答中了解到，我确实可以删除 Blob/File，但是当浏览器需要图像时，它会将它们保存在内存中的某个位置(这是合乎逻辑的)。所以是显示图像(很多而且很重)让我崩溃和减速的事实，而不是 revokeObjectURL 方法。此外，每个浏览器都以自己的方式管理内存，从而导致不同的行为。以下是我得出这个结论的方式。

首先，让我们尝试一下 revokeObjectURL 是否正常工作，使用一个使用 https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications#Example.3A_Using_object_URLs_to_display_images 源代码的简单示例.使用 Chrome，您可以通过检查 chrome://blob-internals/ 或尝试将显示的图像打开到一个空白的新选项卡中来验证 Blob 是否已被撤销。注意:要完全释放 Blob 引用，请添加 document.getElementById("fileElem").value = ""。几年前我发布问题时，发布 blob 大约需要 8 秒，现在几乎是即时的(可能是由于 Chrome 的改进和/或更好的计算机)

然后，是时候进行充电测试了。我用一百张 jpg 每张 ~2.5 Mo 来做。显示图像后，我滚动页面。 Chrome 崩溃，Firefox 运行缓慢(未在其他浏览器上测试)。然而，当我评论 li.appendChild(img) 时一切顺利，即使有大量图像。这表明问题不是来自实际上工作正常的 revokeObjectURL 方法，而是来自显示大量沉重的图像。您还可以测试创建一个包含数百个沉重图像的简单 html 页面并滚动它 => 同样的结果(崩溃/减速)。

最后，为了更深入地了解图像内存管理，在 Firefox 上查看 about:memory 很有趣。例如，我看到当窗口处于事件状态时，Firefox 解压缩图像(图像 -> 未压缩堆上升)，而原始(图像 -> 原始)始终稳定(相对于加载的图像数量)。这里有一个关于内存管理的很好的讨论:http://jeff.ecchi.ca/blog/2010/09/19/free-my-memory .

Answer 1

使用 window.URL.revokeObjectURL() 您只能获取 [Blob] 或 [File] 对象。您不能强制从内存中删除。

注意。浏览器尚未最终确定，它们可能会从这些设施中泄漏。如果您实现动画，您必须了解风险自负。