了解客户端文件的对象URL以及如何释放内存 [英] Understanding Object URLS for client-side files and how to free the memory

问题描述

我正在使用 createObjectURL 来获取本地图像文件的引用URL。当我完成文件/图像后，我调用 revokeObjectURL 来释放该内存。一切都适合我，但我只是想确保我释放所有的记忆力。

I am using createObjectURL to get a reference URL to a local image file. When I am done with the file/image, I call revokeObjectURL to free that memory. Everything works fine for me but I just want to be sure that I am releasing all the memory I can.

在我检查 chrome：// blob-internals 页面后，我的担忧出现了。在调用 createObjectURL 并使用该图像时，我注意到创建了两个条目。一个用url
blob：blobinternal：/// d17c4eef-28e7-42bd-bafa-78d5cb86e761

My concern arose after I inspected the chrome://blob-internals page. Upon calling createObjectURL and using the image, I noticed two entries were created. One with url blob:blobinternal:///d17c4eef-28e7-42bd-bafa-78d5cb86e761

和另一个

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

两者都引用了相同的本地文件路径。在调用 revokeObjectURL 时，只有第二个条目从 chrome：// blob-internals 中删除​​。为什么会出现这种情况，我如何摆脱其他条目以及这两种类型之间的区别？

Both referred to the same local file path though. Upon calling revokeObjectURL only the second entry was removed from chrome://blob-internals. Why does this occur, how do I get rid of the other entry and what is the difference between the two types?

另外，我看过人们撤销URL的示例甚至在使用图像之前。这有什么影响？

Also, I have seen examples of people revoking the URL before even using the image. What effect does this have?

对此主题的一些见解将不胜感激！ ：）

Some insight into the topic would be much appreciated! :)

编辑：
我在 jsfiddle 。首先打开 blobinternals 并删除任何现有的blob。然后运行jsfiddle示例，并在您的计算机上选择一个图像文件。然后刷新blobinternals以查看它添加的内容。然后在我的示例中单击撤消URL。最后刷新blobinternals以查看剩余的blob。

EDIT: I've created an example at jsfiddle. So first open blobinternals and remove any existing blobs. Then run the jsfiddle example, and choose an image file on your machine. Then refresh blobinternals to see what it added. Then click "revoke URL" in my example. Finally refresh blobinternals to see what blobs remain.

推荐答案

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

The other reference (the one beginning with blob:blobinternal) seems to be held by the input type="file" element. I modified your function to reset the value of the input, and when I click the revoke URL button, all the references are cleared:

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

在Chrome Canary中测试。

Tested in Chrome Canary.

这篇关于了解客户端文件的对象URL以及如何释放内存的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！