Blob 对象与其数据之间的关系

Question

当我使用

createObjectURL

获取其 url 并且随后不保留对

Blob

对象的任何引用时，blob 对象是否会被垃圾回收？还是在url撤销之前不会被GC？

async function getImageBlobURL() {
  const res = await fetch('/image.png');
  const blob = await res.blob(); // will it be GCed?
  const url = URL.createObjectURL(blob);
  return url;
}

const img = document.createElement('img');
const url = await getImageBlobURL();
img.url = url;
document.body.append(img);

---

我想做的是：

const finalizationRegistry = new FinalizationRegistry<string>((url) => {
  URL.revokeObjectURL(url);
});

/**
 * Get the URL of the blob, which will automatically revoke as the blob is GCed.
 * Anyone using this url must also hold the blob reference.
 */
export function getAutoRevokableBlobUrl(blob: Blob) {
  const url = URL.createObjectURL(blob);
  finalizationRegistry.register(blob, url);
  return url;
}

// how to use:
const img = document.createElement('img');
const url = getAutoRevokableBlobUrl(blob);
img.url = url;

// when the `img` removed and GCed, the `blob` can be GCed
// and the url will be automatically revoked in `finalizationRegistry`
img._blobObj = blob; 

document.body.append(img);

Answer 1

当我使用

createObjectURL

获取 Blob 对象的 URL 并且随后不保存对 Blob 对象的任何引用时，Blob 对象是否会被垃圾回收？

不，不会。 当您调用

URL.createObjectURL

时，从 URL 字符串到 Blob 的映射将添加到浏览器的内部“blob URL 存储”中。此映射使 Blob 保持活动状态，直到您调用

URL.revokeObjectURL

。

因此你的

getAutoRevokableBlobUrl

功能将无法工作。