调用 URL.createObjectURL() 会强引用 Blob 对象，阻止其被垃圾回收；必须显式调用 URL.revokeObjectURL() 才能解除引用并允许 GC，FinalizationRegistry 无法可靠触发自动撤销。
调用 `url.createobjecturl()` 会强引用 blob 对象，阻止其被垃圾回收；必须显式调用 `url.revokeobjecturl()` 才能解除引用并允许 gc，finalizationregistry 无法可靠触发自动撤销。
在 Web 开发中，Blob 对象常用于处理二进制资源（如图片、音频、文件下载），而 URL.createObjectURL() 是将其暴露为可访问 URL 的关键手段。但一个常见误区是认为：只要不再持有 Blob 实例的 JavaScript 引用，它就会被自动回收，连带其关联的 blob URL 也会失效或被清理。事实并非如此。
根据 W3C File API 规范，createObjectURL() 会在浏览器内部维护一个 blob URL store —— 即一个从生成的 URL 字符串到对应 Blob 对象的强映射表。该映射会主动阻止 Blob 被垃圾回收，无论你是否在 JS 中保留了对它的引用。
这意味着以下代码存在内存泄漏风险：
async function getImageBlobURL() {
const res = await fetch('/image.png');
const blob = await res.blob(); // ❌ blob 在此处已无直接引用
const url = URL.createObjectURL(blob); // ✅ 但内部 store 已强持有 blob
return url; // ⚠️ 返回 url 后，blob 仍驻留内存！
}
const url = await getImageBlobURL();
const img = new Image();
img.src = url; // 图片加载中...
document.body.append(img);
// 此时：blob 未被 GC，url 有效，但开发者已失去对其的控制权更关键的是：FinalizationRegistry 无法替代显式撤销逻辑。你可能设想通过注册 Blob 并在其被 GC 时自动调用 revokeObjectURL()，例如：
const registry = new FinalizationRegistry<string>(url => URL.revokeObjectURL(url));
export function getAutoRevokableBlobUrl(blob: Blob) {
const url = URL.createObjectURL(blob);
registry.register(blob, url); // ❌ 错误假设：blob 会被及时 GC
return url;
}然而，由于 createObjectURL() 自身已对 Blob 建立强引用，Blob 根本不会被 GC——除非你先调用 revokeObjectURL()。这导致 FinalizationRegistry 的回调永远不会执行（或仅在极少数边界场景下延迟触发，不可靠）。规范明确指出：“The user agent must keep a strong reference to the object until it is revoked.”
✅ 正确做法：手动管理生命周期，确保一一配对 create / revoke
- 在资源不再需要时（如
<img alt="如何正确管理 Blob URL 的生命周期与内存释放" >元素卸载、组件销毁、请求取消），立即撤销 URL； - 推荐封装为可追踪的资源句柄，或结合 AbortSignal、React effect、Custom Element lifecycle 等机制自动清理。
示例（安全封装）：
export class BlobUrlResource {
private url: string;
private revoked = false;
constructor(private blob: Blob) {
this.url = URL.createObjectURL(blob);
}
get value(): string {
if (this.revoked) throw new Error('Blob URL already revoked');
return this.url;
}
revoke(): void {
if (!this.revoked) {
URL.revokeObjectURL(this.url);
this.revoked = true;
// 可选：显式解除对 blob 的引用（辅助 GC）
this.blob = null as unknown as Blob;
}
}
}
// 使用方式（如 React useEffect 清理）
function useBlobUrl(blob: Blob) {
const resource = useMemo(() => new BlobUrlResource(blob), [blob]);
useEffect(() => () => resource.revoke(), [resource]);
return resource.value;
}⚠️ 注意事项：
- 不要依赖
FinalizationRegistry或WeakRef实现自动撤销 —— 它们无法打破createObjectURL()建立的强引用； - 避免在长期存活对象（如全局缓存、单例服务）中无限制调用
createObjectURL()，务必配套revoke； - 在开发调试中，可通过 Chrome DevTools → Memory → “Take Heap Snapshot” 检查
Blob是否异常驻留； - 对于大量临时 Blob（如视频帧处理），考虑复用
Blob或改用ArrayBuffer+URL.createObjectURL(new Blob([buf]))并及时释放。
总之：Blob 的内存生命周期由浏览器 URL store 控制，而非 JS 引用计数。显式撤销不是最佳实践，而是强制要求。
