Понимание URL объектов для клиентских файлов и как освободить память

Question

Я использую createObjectURL, чтобы получить ссылку на локальный файл изображения. Когда я закончу с файлом / изображением, я вызываю revokeObjectURL, чтобы освободить эту память. У меня все работает нормально, но я просто хочу быть уверенным, что освобождаю всю память, какую только могу.

Моя проблема возникла после того, как я проверил страницу chrome://blob-internals. После вызова createObjectURL и использования изображения я заметил, что были созданы две записи. Один с URL blob:blobinternal:///d17c4eef-28e7-42bd-bafa-78d5cb86e761

и другие

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

Оба указали на один и тот же локальный путь к файлу. После вызова revokeObjectURL только вторая запись была удалена из chrome://blob-internals. Почему это происходит, как мне избавиться от другой записи и в чем разница между этими двумя типами?

Кроме того, я видел примеры людей, отозвавших URL еще до использования изображения. Какой эффект это имеет?

Некоторое понимание этой темы будет высоко ценится! :)

EDIT : Я создал пример на jsfiddle . Поэтому сначала откройте blobinternals и удалите все существующие капли. Затем запустите пример jsfiddle и выберите файл изображения на своем компьютере. Затем обновите blobinternals, чтобы увидеть, что он добавил. Затем нажмите «отозвать URL» в моем примере. Наконец, обновите blobinternals, чтобы увидеть, какие пятна остаются.

Answer 1

Другая ссылка (начинающаяся с blob:blobinternal), похоже, содержится в элементе input type="file".Я изменил вашу функцию, чтобы сбросить значение ввода, и когда я нажимаю кнопку отзыва URL, все ссылки очищаются:

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

Протестировано в Chrome Canary.