了解客户端文件的对象 URL 以及如何释放内存答案

【问题标题】：Understanding Object URLS for client-side files and how to free the memory了解客户端文件的对象 URL 以及如何释放内存
【发布时间】：2011-08-23 20:31:06
【问题描述】：

我正在使用createObjectURL 获取本地图像文件的参考 URL。当我完成文件/图像时，我调用revokeObjectURL 来释放该内存。一切对我来说都很好，但我只是想确保我正在释放我能释放的所有内存。

我在查看chrome://blob-internals 页面后产生了担忧。在调用createObjectURL 并使用图像时，我注意到创建了两个条目。一个有网址 blob:blobinternal:///d17c4eef-28e7-42bd-bafa-78d5cb86e761

和其他的

blob:http://localhost/dbfe7b09-81b1-48a4-87cd-d579b96adaf8

虽然两者都引用了相同的本地文件路径。在调用revokeObjectURL 时，仅从chrome://blob-internals 中删除了第二个条目。为什么会出现这种情况，如何去掉其他条目，这两种类型有什么区别？

此外，我还看到有人在使用图片之前就撤消了 URL。这有什么影响？

非常感谢您对该主题的一些见解！ :)

编辑：我在jsfiddle 创建了一个示例。所以首先打开blobinternals 并删除所有现有的blob。然后运行 jsfiddle 示例，并在您的机器上选择一个图像文件。然后刷新 blobinternals 以查看它添加了什么。然后在我的示例中单击“撤销 URL”。最后刷新 blobinternals 以查看剩余的 blob。

【问题讨论】：

您使用的是哪个版本的 Chrome？我在 Chrome 15 Dev 频道上没有看到这个（只创建了一个 blobURL），但记得以前看过这个。你有一个小的测试页面可以回购正在生成的两个 URL 吗？根据我的经验，chrome://blob-internals 有时需要几秒钟才能反映 revokeObjectURL 调用。
我已经编辑了我的帖子以包含一个 jsfiddle 示例。我正在运行 chrome 14beta。

标签： javascript image html fileapi

【解决方案1】：

另一个引用（以blob:blobinternal 开头的引用）似乎由input type="file" 元素持有。我修改了你的函数来重置输入的值，当我点击撤销 URL 按钮时，所有的引用都被清除了：

killBut.onclick = function () {
    URL.revokeObjectURL(ourURL);
    fileBut.value = '';
};

在 Chrome Canary 中测试。

【讨论】：

这似乎也对我有用。好主意，谢谢！一个问题：文件输入元素在IE中不是只读的吗？如果是这样，如何清除它？
通过将其放入 form 元素并在其上调用 reset() 来清除它。这是一个示例：jsfiddle.net/ag92S/9
在 chrome canary 中，chrome:\\blob-internals 的表示要好得多。您可以看到唯一生成的 blob 以及它们被引用的频率。例如。您有一个带有 href 引用的链接和一个引用同一 blob 的对象 => 该 blob 的引用计数为 2。