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

Question

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

但现在,我有另一个问题,与此类似.我希望客户可以随时上传200张图片.但浏览器崩溃了,使用的ram非常高!所以我认为可能同时显示的图像太多了,我使用数组设置了一个等待文件队列的系统,以便每次只处理10个文件.但问题仍然存在.

在谷歌浏览器上,如果我检查chrome://blob-internals/文件(通常已经发布的文件window.URL.revokeObjectURL())在延迟8秒后大约会被释放.在Firefox上我不确定,但似乎文件没有发布(我检查about:memory- >图像)

我的代码是坏的,还是独立于我的问题？是否有解决方案迫使导航员立即释放内存？如果它可以提供帮助,这是问题发生的JavaScript的一部分:(抱歉,我在这里给出了一个链接,因为新成员的图像垃圾邮件机制)http://www26.zippyshare.com/v/14195278/file. HTML.

编辑

这是一种自己的答案+对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和/或更好的计算机的改进)

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

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

Answer 1

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

注意. 浏览器尚未最终确定,它们可能会从这些设施泄漏.如果您实施动画,则必须自行承担风险.