createobjecturl生成的链接点开为空白页，因其仅为内存中blob的引用地址，非真实文件路径；页面刷新、关闭或调用revokeobjecturl后立即失效，且不可用于http请求，仅限同源dom加载场景。
createObjectURL 生成的链接为什么点开是空白页？
因为 URL.createObjectURL 返回的是一个指向内存中 Blob 的引用地址，不是真实文件路径；浏览器只在当前页面生命周期内保留该引用，一旦页面刷新、关闭或调用 URL.revokeObjectURL，链接立即失效。常见表现是点击后空白页、控制台报 net::ERR_FILE_NOT_FOUND 或直接下载失败。
关键点：这个 URL 只能用于同源上下文中的 <a></a> 下载、<img> 显示、<video></video> 播放等 DOM 加载场景，不能发 HTTP 请求去“访问”它。
- 必须配合
download属性才能触发下载（否则多数浏览器会尝试导航到该 URL，结果为空） - 如果 Blob 是文本类（如 JSON、CSV），需确保 MIME type 正确，否则
<a></a>可能拒绝解析或下载为blob无后缀文件 - 不要在
fetch或XMLHttpRequest中把createObjectURL结果当 URL 传——它不接受网络请求
如何正确绑定 click 事件并触发下载？
手动创建 <a></a> 标签 + click() 是最可靠方式，避免依赖用户手动点击（尤其移动端）。注意：必须在当前任务队列中完成插入和点击，否则部分浏览器会拦截“非用户手势触发”的下载。
const blob = new Blob(['hello world'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'hello.txt'; // ⚠️ 这个属性决定文件名，没有它可能下载为 'download'
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url); // 用完立即释放，防止内存泄漏
-
a.download在跨域 iframe 或某些安全策略下可能被忽略，此时浏览器退化为导航行为 - 不要复用同一个
<a></a>元素多次调用click()，每次应新建或重置href和download -
URL.revokeObjectURL不是必须立刻调用，但若 Blob 较大（如视频片段），延迟释放会导致内存持续占用
图片/音视频 Blob 能直接 src= 吗？
可以，但要注意 MIME type 必须匹配实际内容，否则 <img> 显示空白、<video></video> 报 DOMException: The element has no supported sources。
const imgBlob = await fetch('/api/image').then(r => r.blob());
const imgUrl = URL.createObjectURL(imgBlob);
const img = document.createElement('img');
img.src = imgUrl;
img.onload = () => URL.revokeObjectURL(imgUrl); // 图片加载成功后再释放
document.body.appendChild(img);
- 对于
<video></video>或<audio></audio>，推荐用canPlayType()预检 MIME type 是否被支持，例如video.canPlayType('video/mp4') - 如果 Blob 来自 canvas
toBlob()，注意指定 type，比如canvas.toBlob(cb, 'image/jpeg', 0.8)，否则默认是image/png - 不要在
src设置前就调用revokeObjectURL，否则资源加载中断
为什么有时 revoke 后还能加载？
因为浏览器内部对 createObjectURL 生成的引用做了缓存或延迟回收，但这属于实现细节，不可依赖。规范明确要求：一旦 revoke，后续任何对该 URL 的使用都应失败。
- 真正可靠的清理时机取决于使用场景：下载完成就 revoke；媒体元素
loadeddata或canplay后再 revoke；若需多次读取（如预览+下载），则推迟到所有操作结束 - 没 revoke 的 URL 不会自动销毁，长期驻留会拖慢 GC，尤其在频繁生成 Blob 的应用（如录屏、图像编辑）中容易 OOM
- Chrome DevTools 的 Memory 面板里搜索 “blob:” 可看到未释放的 URL 列表，是排查内存泄漏的直接线索
download 属性和及时 revokeObjectURL——前者导致下不了，后者让页面越跑越卡。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
