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

Question

我正在使用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。

Answer 1

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

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

在Chrome Canary中测试过。