Blob URL比Data URL快得多，因其不进行Base64编码，避免1.33倍内存膨胀和解码开销，仅生成轻量内部引用，支持流式读取与直接媒体引擎对接，加载延迟达毫秒级且不阻塞主线程。
直接用 Blob URL 加载大文件，核心是绕过编码转换、跳过网络传输、让浏览器从本地内存直接读取二进制流。它不提升带宽，但能将加载延迟压到毫秒级，同时大幅降低内存峰值和主线程阻塞。
为什么 Blob URL 比 Data URL 快得多
Data URL 本质是 Base64 编码字符串，1GB 文件会膨胀成约 1.33GB 的纯文本，浏览器需分配巨量内存、执行解码、再交给渲染引擎——整个过程卡顿明显，且无法中断。Blob URL 则不同：
- 不复制原始数据，只生成一个轻量级内部引用（
blob:https://xxx/abcd-efgh） - 浏览器媒体引擎直接对接 Blob 数据源，加载即开始解码，无需等待完整载入
- 支持流式读取，视频拖拽、PDF 分页渲染等交互更顺滑
正确创建与复用 Blob URL 的关键操作
避免每次预览都重新读文件或重复生成 URL，尤其在 SPA 中频繁切换视图时：
- 首次读取后，用
FileReader.readAsArrayBuffer()或直接new Blob([file], {type: file.type})构造 Blob - 把 Blob 实例缓存在
WeakMap或按文件名哈希存入Map，后续调用URL.createObjectURL(cachedBlob)复用 - 不要对同一 Blob 多次调用
createObjectURL后忘记revoke；每个 URL 都需配对释放
必须及时释放，否则内存会持续堆积
Blob URL 不随组件卸载自动销毁，长期驻留会吃光内存，尤其在预览多张高清图或多个视频片段时：
- 在组件
useEffect清理函数（React）、beforeDestroy（Vue）或弹窗关闭回调中调用URL.revokeObjectURL(url) - 若需临时保留（如用户尚未确认上传的草稿），可绑定
beforeunload事件兜底释放 - 开发期用 Chrome 的 Memory 面板录制堆快照，检查
Blob实例数量是否稳定
配合服务端缓存，实现真正零重复请求
Blob URL 解决的是前端复用，但如果资源来自 CDN 或静态服务器，仍需避免多次 fetch：
- 首次
fetch后调用response.blob()得到 Blob，再生成 URL 并缓存 - 确保服务端响应头含
Cache-Control: public, max-age=31536000，让浏览器磁盘缓存生效 - Azure/S3 等对象存储需为每个文件单独设置 cache-control 属性，全局配置无效
