Response.blob()可高效加载多媒体文件，通过fetch获取响应后调用.blob()得Blob对象，再用URL.createObjectURL()生成临时URL赋值给img或audio元素，并建议卸载前调用revokeObjectURL释放引用。
通过 Response.blob() 可以高效加载多媒体文件（如图片、音频），无需转成 base64 或完整字符串，既节省内存又支持流式处理。关键在于用 fetch 获取响应后调用 .blob()，再用 URL.createObjectURL() 创建临时 URL 赋给媒体元素。
获取 Blob 并创建可播放/显示的 URL
Response.blob() 返回一个 Promise，解析为 Blob 对象。Blob 是原始二进制数据的封装，浏览器能直接识别其 MIME 类型（如 image/png、audio/mpeg），适合赋值给 <img> 的 src 或 <audio> 的 src：
- 调用
fetch(url).then(res => res.blob())获取 Blob - 用
URL.createObjectURL(blob)生成生命周期绑定当前文档的临时 URL - 将该 URL 赋给
img.src或audio.src即可触发渲染或加载 - 页面卸载前建议调用
URL.revokeObjectURL(url)释放引用（非强制，但推荐）
处理加载失败与类型校验
并非所有响应都适合转为媒体资源。需检查 response.ok 和 response.headers.get('content-type') 避免误加载非媒体内容：
- 若
response.status不是 2xx，.blob()仍会成功返回空或异常 Blob，应先判断res.ok - 可检查
res.headers.get('content-type')是否包含image/或audio/，过滤掉 HTML、JSON 等不兼容类型 - 将
.blob()放在then链中，并用catch捕获网络错误或解析异常
配合 DOM 元素实现按需加载
适用于懒加载图片、预加载音频片段等场景。例如为 <img > 添加加载逻辑：
- 监听元素进入视口，触发
fetch(data-src) - 拿到 Blob 后生成 URL，设为
img.src，同时移除data-src - 可添加 loading 状态类，加载完成后再移除，配合 CSS 显示骨架屏或淡入动画
- 对
<audio>，设置src后可调用load()或直接play()（注意自动播放策略限制）
注意事项与性能提示
Blob 本身不自动释放内存，createObjectURL 生成的 URL 会保持对 Blob 的引用：
- 避免长期持有大量 object URL，尤其在列表滚动加载多张图时，及时
revokeObjectURL - Blob 可复用：同一 Blob 可生成多个 URL，也可用于
FileReader读取内容或上传 - 不建议用
blob.text()处理图片/音频——会失败或乱码；仅blob()适用 - 如需进一步处理（如压缩图片、提取音频元数据），可用
new FileReader().readAsArrayBuffer(blob)转为 ArrayBuffer
