クライアントサイドファイルのオブジェクトURLとそのメモリを解放する方法について

Question

createObjectURLを使用して、ローカルイメージファイルへの参照URLを取得しています。私がファイル/イメージで完了したら、私はrevokeObjectURLにそのメモリを解放するように呼び出します。すべてがうまく動作しますが、私ができるすべてのメモリを解放していることを確認したいだけです。

私はchrome://blob-internalsページを調べた後、私の懸念が生じました。 createObjectURLを呼び出してイメージを使用すると、2つのエントリが作成されていることがわかりました。 URL blob:blobinternal:///d17c4eef-28e7-42bd-bafa-78d5cb86e761

およびその他の

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

両方を持つ一つは、しかし、同じローカルファイルパスに言及しました。 revokeObjectURLを呼び出すと、2番目のエントリだけがchrome://blob-internalsから削除されました。なぜこのようなことが起こるのですか。他のエントリを取り除くにはどうすればいいのですか？また、2つのタイプの違いは何ですか？

また、画像を使用する前にURLを取り消す人々の例も見てきました。これにはどのような影響がありますか？

トピックに関するいくつかの洞察は非常に高く評価されます。 :)

編集： 私はjsfiddleに例を作成しました。最初にblobinternalsを開き、既存のブロブを削除してください。その後、jsfiddleの例を実行し、マシン上のイメージファイルを選択します。それから、追加されたものを見るために境界線を更新する。次に、私の例では「URLを取り消す」をクリックします。最後にblobinternalsをリフレッシュして、どのブロブが残っているかを確認します。

Answer 1

input type="file"要素では、他の参照（blob:blobinternalで始まる参照）が保持されているようです。私は、入力の値をリセットするためにあなたの関数を変更し、私はREVOKEのURL]ボタンをクリックすると、すべての参照はクリアされます：クロームカナリアでテスト

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

。