记录---啊！！！Blob 居然这么强大！

🧑‍💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣

啊！！！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.js
const worker = new Worker('worker.js');

const blob = new Blob(['大量数据...'], { type: 'text/plain' });
worker.postMessage(blob);

// worker.js
onmessage = 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
如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。