ObjectURL & DataURL

在 JavaScript 中，ObjectURL 和 DataURL 是两种用于表示文件或二进制数据的方式。它们都可以用来显示图片、下载文件等用途。

特性对比

特性	ObjectURL (Blob URL)	DataURL
类型	一种指向内存中 Blob 的临时地址	Base64 编码的字符串
格式示例	blob:https://example.com/123-456-789	data:image/png;base64,iVBORw0KG...
存储方式	引用内存中的 Blob 对象	完整的数据内容编码为字符串
生命周期	页面关闭后自动释放（可手动释放）	永久存在，除非变量被销毁
性能	更高效（不复制数据）	占用更多内存（Base64 数据更大）
使用场景	文件预览、大文件处理	小图标、嵌入资源、离线 HTML

ObjectURL(Blob URL)

✅ 优点

• 节省内存：只是对原始数据的一个引用。

• 支持大文件：不会将整个文件转成字符串。

• 可以跨域使用（如 <img>、<a download>）。

❌ 缺点

• 不可持久化：页面刷新或关闭后失效。

• 不能直接传输给 Worker 或通过 JSON 发送。

const objectUrl = URL.createObjectURL(file);

image.src = objectUrl;

// 使用完记得释放，否则造成内存泄漏
window.URL.revokeObjectURL(objectUrl);

DataURL

✅ 优点

• 自包含：可以独立传输，适合存储或嵌入 HTML/CSS。

• 离线可用：不需要网络或本地引用。

• 可用于 Canvas、Web Workers 等环境。

❌ 缺点

• 数据体积大：Base64 编码会使数据变大约 33%。

• 解码耗时：浏览器需要解析 Base64 再还原成二进制。

如何选择？

场景	推荐类型	原因
图片上传前预览	✅ ObjectURL	快速、高效、无需转码
图片要保存到服务器或数据库	✅ DataURL	易于传输、存储
小图标或内联资源	✅ DataURL	减少请求次数
处理大文件（如视频、PDF）	✅ ObjectURL	避免内存占用过高
在 Web Worker 或 Service Worker 中使用	✅ DataURL	ObjectURL 无法跨线程访问