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

Question

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

在检查 chrome://blob-internals 页面后，我开始担心。在调用 createObjectURL 并使用图像后，我注意到创建了两个条目。一张有网址的 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。

Answer 1

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

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

在 Chrome Canary 中测试。