Tìm hiểu URL đối tượng cho tệp phía máy khách và cách giải phóng bộ nhớ

Question

Tôi đang sử dụng createObjectURL để nhận URL tham chiếu đến tệp hình ảnh cục bộ. Khi tôi làm xong với tập tin/hình ảnh, tôi gọi revokeObjectURL để giải phóng bộ nhớ đó. Tất cả mọi thứ hoạt động tốt cho tôi nhưng tôi chỉ muốn chắc chắn rằng tôi đang giải phóng tất cả bộ nhớ tôi có thể.

Mối quan tâm của tôi nảy sinh sau khi tôi kiểm tra trang chrome://blob-internals. Khi gọi createObjectURL và sử dụng hình ảnh, tôi nhận thấy hai mục nhập đã được tạo. Một với url blob:blobinternal:///d17c4eef-28e7-42bd-bafa-78d5cb86e761

và khác

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

Cả hai đề cập đến đường dẫn tập tin cùng một địa phương mặc dù. Khi gọi revokeObjectURL chỉ mục nhập thứ hai đã bị xóa khỏi chrome://blob-internals. Tại sao điều này xảy ra, làm cách nào để loại bỏ mục nhập khác và sự khác biệt giữa hai loại là gì?

Ngoài ra, tôi đã thấy các ví dụ về việc mọi người thu hồi URL trước khi sử dụng hình ảnh. Hiệu ứng này có tác dụng gì?

Một số thông tin chi tiết về chủ đề sẽ được nhiều người đánh giá cao! :)

EDIT: Tôi đã tạo ví dụ tại jsfiddle. Trước tiên, hãy mở blobinternals và xóa mọi đốm màu hiện có. Sau đó chạy ví dụ jsfiddle và chọn tệp hình ảnh trên máy của bạn. Sau đó làm mới blobinternals để xem những gì nó được thêm vào. Sau đó nhấp vào "thu hồi URL" trong ví dụ của tôi. Cuối cùng làm mới blobinternals để xem những gì blob vẫn còn.

Answer 1

Tham chiếu khác (số bắt đầu bằng blob:blobinternal) dường như được giữ bởi phần tử input type="file". Tôi đã sửa đổi chức năng của bạn để đặt lại giá trị của đầu vào và khi tôi nhấp vào nút thu hồi URL, tất cả các tham chiếu sẽ bị xóa:

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

Đã thử nghiệm trong Chrome Canary.