了解客户端文件的对象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 中测试。