必须调用URL.revokeObjectURL，因为每次createObjectURL都会在内存中创建持久Blob引用，浏览器不会自动释放，即使DOM元素已移除或重赋值；唯有显式revoke或页面卸载才能解除引用、防止内存泄漏。
直接用 URL.createObjectURL 生成预览地址确实快，但不及时撤销会导致内存泄漏——尤其在频繁上传、切换文件的场景下，页面可能卡顿甚至崩溃。
为什么必须调用 revokeObjectURL？
每次调用 createObjectURL 都会创建一个指向内存中 Blob 数据的持久引用。浏览器不会自动释放它，哪怕对应的 <img> 或 <video> 已从 DOM 移除或被重新赋值。这个引用会一直占用内存，直到显式调用 URL.revokeObjectURL，或页面卸载。
- 多个 PDF 或高清视频预览后未撤销 → 内存持续增长，Chrome 任务管理器里可见“JavaScript memory”飙升
- 同一文件重复 create → 产生多个独立 URL，每个都要单独 revoke
- 组件销毁（如 React unmount、Vue beforeUnmount）时遗漏撤销 → 最常见泄漏源头
安全撤销的典型时机
撤销不是“做完就 revoke”，而是要确保：URL 不再被任何 DOM 元素、CSS 属性、JS 变量持有引用，且新预览已稳定生效。
-
替换预览前撤销旧 URL：先
URL.revokeObjectURL(oldUrl)，再URL.createObjectURL(newBlob) -
组件卸载时统一清理：在 React 的
useEffect cleanup、Vue 的onBeforeUnmount中遍历已创建的 URL 列表并 revoke -
预览加载失败也需撤销：例如
<img>的onerror触发后，仍应 revoke 对应 URL，避免“失败却驻留”的情况
推荐的封装模式（轻量级）
避免零散调用，把创建和撤销绑定为原子操作：
function usePreviewUrl(blob) {
const [url, setUrl] = useState('');
useEffect(() => {
if (!blob) return;
const newUrl = URL.createObjectURL(blob);
setUrl(newUrl);
return () => {
if (newUrl) URL.revokeObjectURL(newUrl);
};
}, [blob]);
return url;
}
该 Hook 自动处理生命周期，支持响应式更新：blob 变更时旧 URL 撤销、新 URL 创建；组件卸载时自动清理。注意：不能把 blob 存入 ref 或全局变量后延迟 revoke，否则无法保证引用及时释放。
替代方案：何时考虑不使用 createObjectURL？
对于小文件（如图标、缩略图）或服务端已支持直传预览的场景，可绕过本地 Blob：
- 后端提供带签名的临时预览链接 → 无内存压力，适合长期缓存
- 使用
FileReader.readAsDataURL→ 生成 base64，适用于极小文件（ - PDF/Office 文档优先走 WebAssembly 渲染器（如 pdf.js）→ 直接解析 ArrayBuffer，无需 URL 封装
不复杂但容易忽略：撤销不是锦上添花，而是内存安全的必要步骤。
