?? 写在开头
点赞 + 收藏 === 学会???
啊！！！Blob 居然这么强大！
在前端开发的世界里，我们每天都在和各种 API、对象和数据打交道。然而，有一个对象，常常被我们忽视，却又在背后默默支撑着许多关键功能 —— 它就是 Blob。
Blob（Binary Large Object）听起来像是一个“冷门”对象，但实际上，它几乎无处不在：文件上传、下载、视频流、离线缓存、甚至 Service Worker 中的响应缓存……这些场景中，Blob 都在默默发挥着作用。
今天，就让我们揭开 Blob 的神秘面纱，看看它到底有多强大。
一、Blob 是什么？
从字面上看，Blob 是“二进制大对象”的意思。在 JavaScript 中，Blob 对象表示一个不可变的、原始数据的类文件对象。它不一定是文本，可以是图片、音频、视频、JSON、甚至任意二进制数据。
创建一个 Blob 非常简单：
const blob = new Blob(['Hello, Blob!'], { type: 'text/plain' });你可以传入字符串、ArrayBuffer、BufferSource、甚至其他 Blob，再指定 MIME 类型，就可以创建一个 Blob。
二、Blob 的“超能力”有哪些？
1. 直接生成文件下载
你是否还在用 a 标签配合 download 属性实现下载？试试 Blob 吧！
const blob = new Blob(['这是一段文本内容'], { type: 'text/plain' });const url = URL.createObjectURL(blob);const a = document.createElement('a');a.href = url;a.download = 'example.txt';a.click();URL.revokeObjectURL(url); // 释放内存这样你就可以动态生成文件并触发下载，无需服务器参与。非常适合前端导出日志、配置文件、甚至代码片段。
2. 作为文件上传的桥梁
上传文件时，我们通常使用 File 对象，而 File 是 Blob 的子类。这意味着你完全可以用 Blob 构造上传内容。
const blob = new Blob(['{"name": "Blob"}'], { type: 'application/json' });const file = new File([blob], 'data.json', { type: 'application/json' });const formData = new FormData();formData.append('file', file);fetch('/upload', { method: 'POST', body: formData});你甚至可以在上传前对数据进行加密、压缩、拼接，Blob 就是你的“原材料”。
3. 在 Service Worker 中缓存响应
Service Worker 是 PWA 的核心，而缓存响应时，Blob 也是常客。
self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request).then(response => { if (response) return response; return fetch(event.request).then(fetchResponse => { // 假设是图片 return fetchResponse.blob().then(blob => { caches.open('image-cache').then(cache => { cache.put(event.request, new Response(blob)); }); return new Response(blob); }); }); }) );});通过 Blob 缓存资源，可以实现更灵活的缓存策略，甚至跨页面共享。
4. 在 Web Worker 中处理大文件
Web Worker 是处理耗时任务的好帮手。Blob 可以被结构化克隆，因此可以安全地在主线程和 Worker 之间传递。
// main.jsconst worker = new Worker('worker.js');const blob = new Blob(['大量数据...'], { type: 'text/plain' });worker.postMessage(blob);// worker.jsonmessage = function(e) { const blob = e.data; const reader = new FileReader(); reader.onload = function() { console.log(reader.result); }; reader.readAsText(blob);};这种模式非常适合处理大型文件，比如压缩、解压、加密、解析等操作。
三、Blob + URL.createObjectURL：前端资源的“虚拟路径”
有时候，我们需要在前端生成一个“临时链接”来引用资源，比如预览图片、播放音频、嵌入 PDF 等。
const blob = new Blob(['PDF内容...'], { type: 'application/pdf' });const url = URL.createObjectURL(blob);iframe.src = url;这种方式不需要将文件上传到服务器，也不需要使用 base64 编码，节省内存，性能更优。
四、Blob 的局限与注意事项
虽然 Blob 很强大，但也有一些需要注意的地方：
- 不可变性：Blob 是只读的，一旦创建，内容不能修改。
- 不能直接读取内容：需要配合
FileReader或Response来读取。 - 内存管理：使用完
URL.createObjectURL后要记得调用URL.revokeObjectURL()，否则会造成内存泄漏。 - 兼容性：现代浏览器支持良好，但在某些老旧设备上仍需注意。
五、结语：Blob 是前端的“瑞士军刀”
Blob 不是一个炫酷的技术，但它却是一个极其实用、灵活、不可或缺的工具。它连接了前端数据处理的多个维度：文件、网络、缓存、Worker、甚至 DOM 操作。
在现代 Web 开发中，理解并熟练使用 Blob，不仅能提升开发效率，还能帮助你写出更优雅、更健壮的代码。
所以，下次当你需要处理文件、缓存资源、生成下载、甚至构建离线应用时，别忘了：Blob 居然这么强大！
本文转载于：https://juejin.cn/post/7529827462151667763
如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
