调用 URL.revokeObjectURL 后 Blob URL 仍能访问是预期行为，因其仅解除 URL 与 Blob 的全局映射，不中断已绑定 DOM 元素（如 <img>）的引用或正在进行的加载/解码流程。
为什么 URL.revokeObjectURL 调用后链接还能访问？
常见现象是：调用 URL.revokeObjectURL(blobUrl) 后，<img src="blob:..."></img> 仍能正常显示，或 fetch(blobUrl) 还能成功——这不是 bug，而是预期行为。URL.createObjectURL 创建的是对底层 Blob 或 MediaSource 的引用，revokeObjectURL 只是解除该 URL 与对象的绑定，**不影响已加载完成的资源或正在使用的 DOM 引用**。
真正需要释放的，是那些“已创建但尚未被使用、或已被替换却未清理”的 URL，否则会持续占用内存（尤其大文件）。
- 只在确认该 URL 不再被任何地方引用时才调用
revokeObjectURL - 不要在
src设置后立刻 revoke——浏览器内部可能还在解析或解码 - 如果用在
<video>或<audio>上，需等loadeddata或canplay触发后再考虑是否 revoke（通常不建议 revoke 已生效的媒体 URL）
URL.createObjectURL 和 revokeObjectURL 必须配对使用吗？
不是强制配对，但漏掉 revokeObjectURL 是典型的内存泄漏来源。尤其在频繁预览文件（如图片上传组件）时，每个 createObjectURL 都会保留一份内存中的 Blob 副本，直到页面卸载或显式 revoke。
- 每次
createObjectURL返回唯一 URL，多次调用同一Blob会产生多个 URL，每个都需单独 revoke - 同一个 URL 被 revoke 多次无副作用，但没必要；revoking 一个从未 create 过的 URL 也不会报错
- 推荐模式：保存 URL 到变量 → 绑定到元素 → 在元素被移除/替换前调用
revokeObjectURL
如何安全地在 React/Vue 中管理 blob URL 生命周期？
框架组件容易因重渲染丢失对旧 URL 的引用，导致无法 revoke。关键不是“自动清理”，而是“明确持有并销毁”。
立即学习“前端免费学习笔记（深入）”；
- React 中用
useRef缓存上一次生成的 URL：const urlRef = useRef();<br>useEffect(() => {<br> if (urlRef.current) URL.revokeObjectURL(urlRef.current);<br> const url = URL.createObjectURL(file);<br> urlRef.current = url;<br> imgRef.current.src = url;<br> return () => { if (urlRef.current) URL.revokeObjectURL(urlRef.current); };<br>}, [file]); - Vue 3 的
onBeforeUnmount或v-bind动态属性更新时手动 revoke，避免依赖响应式系统追踪 URL - 不要把 URL 存在 reactive state 里——它不是响应式数据，且 revoke 后再读取会变成无效字符串
哪些场景下其实不该调用 revokeObjectURL？
不是所有 blob URL 都适合立即释放。误 revok e 会导致资源中断或白屏。
-
<iframe src="blob:..."></iframe>：一旦加载完成，revoking 会触发 iframe 白屏或重新加载失败 - 作为
Worker构造函数参数传入的 blob URL：Worker 内部持有引用，revoke 会导致 Worker 初始化失败（报错DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope'） - 正在被
fetch()或XMLHttpRequest使用的 URL：虽然多数情况不报错，但某些浏览器可能中止请求 - Service Worker 中通过
cache.put()缓存的 blob URL：revoking 会导致缓存条目失效
最稳妥的做法：只对“纯前端临时预览”类 URL（如用户选中的图片缩略图）做 revoke，且确保 DOM 元素已卸载或替换完毕。
