blob构造函数参数类型包括arraybuffer、arraybufferview、blob和domstring。它接受一个数组作为参数，数组元素可以是这四种类型之一，还可选第二个对象参数指定mime类型和行尾处理方式。例如new blob([“hello, blob!”], { type: “text/plain” })创建文本blob，new blob([buffer], { type: “application/octet-stream” })创建二进制blob。处理大型blob对象时可采用分片读取、使用streams api、避免不必要的复制和优化数据处理等策略。分片读取通过filereader每次读取一部分数据，降低内存占用；streams api通过管道高效传输数据；slice方法避免加载整个blob；逻辑处理需高效以减少资源消耗。监控blob下载进度可通过xmlhttprequest实现，监听progress事件获取下载状态，计算已下载字节数与总字节数比例更新ui，并在完成后创建标签模拟下载。blob url的生命周期与创建它的document相关联，使用完后应立即调用url.revokeobjecturl()释放内存，防止内存泄漏，尤其注意循环中及时释放或监听页面卸载事件统一清理。
Blob对象是html5中一个非常有用的特性，它允许你在客户端处理大型的二进制数据。简单来说，它就像一个文件容器，你可以把各种数据塞进去，然后进行操作，比如生成下载链接。
创建Blob对象，然后利用它生成URL，最后创建一个标签，设置href为Blob URL，download属性为文件名，点击这个链接就能下载了。
Blob构造函数的参数类型有哪些？
Blob构造函数接受一个数组作为参数，数组中的每个元素可以是以下类型：
立即学习“前端免费学习笔记（深入）”；
- ArrayBuffer: 一个表示原始二进制数据的通用固定长度缓冲区。
- ArrayBufferView: 一种类型化的数组，比如Uint8Array，它提供了对ArrayBuffer的特定数据类型的视图。
- Blob: 另一个Blob对象，这允许你创建Blob的Blob。
- DOMString: 一个UTF-16字符串。
第二个可选参数是一个对象，用于指定Blob的MIME类型(type)和行尾处理方式(endings)，endings可以是transparent或native。
举个例子，如果你想创建一个包含字符串 “Hello, Blob!” 的Blob对象，可以这样做：
const blob = new Blob(["Hello, Blob!"], { type: "text/plain" });
如果你想创建一个包含二进制数据的Blob对象，可以使用ArrayBuffer：
const buffer = new Uint8Array([72, 101, 108, 108, 111]); // "Hello" 的ASCII码 const blob = new Blob([buffer], { type: "application/octet-stream" });
理解这些参数类型对于灵活地创建和操作Blob对象至关重要。
如何处理大型Blob对象？
处理大型Blob对象时，内存占用是一个需要特别关注的问题。一次性加载整个Blob到内存中可能会导致性能问题甚至崩溃。以下是一些处理大型Blob对象的策略：
-
分片读取: 使用FileReader的readAsArrayBuffer或readAsText方法，可以分片读取Blob数据。每次只读取一小部分数据，处理完后再读取下一部分。这可以显著降低内存占用。
const blob = // ... 一个大型Blob对象 const chunkSize = 1024 * 1024; // 1MB let offset = 0; const reader = new FileReader(); reader.onload = function(e) { // 处理读取到的数据 e.target.result offset += chunkSize; if (offset < blob.size) { readNextChunk(); } else { // 全部读取完成 } }; reader.onerror = function(e) { console.error("读取出错:", e); }; function readNextChunk() { const slice = blob.slice(offset, offset + chunkSize); reader.readAsArrayBuffer(slice); // 或者 readAsText } readNextChunk(); -
使用Streams API: Streams API提供了一种更高效的方式来处理大型数据。你可以创建一个ReadableStream来读取Blob数据，然后通过管道将数据传递给WritableStream进行处理。这种方式可以实现零拷贝，避免不必要的内存复制。
async function processBlob(blob) { const readableStream = blob.stream(); const reader = readableStream.getReader(); try { while (true) { const { done, value } = await reader.read(); if (done) { break; } // 处理 value (Uint8Array) } } catch (error) { console.error("读取出错:", error); } finally { reader.releaseLock(); } } -
避免不必要的复制: 在处理Blob数据时，尽量避免不必要的复制操作。例如，如果只需要读取Blob的一部分数据，可以使用blob.slice()方法创建一个新的Blob对象，而不是将整个Blob加载到内存中。
-
优化数据处理: 确保你的数据处理逻辑是高效的。例如，避免在循环中进行大量的字符串拼接操作，可以使用ArrayBuffer或Streams API来构建数据。
选择合适的策略取决于你的具体需求和应用场景。分片读取适用于需要逐步处理数据的场景，而Streams API适用于需要高效地处理大型数据的场景。
如何监控Blob下载进度？
监控Blob下载进度需要一些技巧，因为直接使用标签下载Blob时，浏览器不会提供下载进度信息。一个可行的方案是使用XMLHttpRequest (XHR) 来手动下载Blob，这样就可以监听progress事件来获取下载进度。
function downloadBlob(blob, filename) { const xhr = new XMLHttpRequest(); xhr.open('GET', URL.createObjectURL(blob), true); xhr.responseType = 'blob'; xhr.onload = function() { if (this.status === 200) { const blob = this.response; const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = filename; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(a.href); } }; xhr.onprogress = function(e) { if (e.lengthComputable) { const percentComplete = (e.loaded / e.total) * 100; console.log(`下载进度: ${percentComplete.toFixed(2)}%`); // 更新进度条或其他UI元素 } }; xhr.onerror = function() { console.error("下载出错"); }; xhr.send(); }
这个方法的核心在于：
- 使用XHR下载: 使用XMLHttpRequest发起GET请求，设置responseType为blob，这样XHR会自动将响应数据解析为Blob对象。
- 监听progress事件: xhr.onprogress事件会在下载过程中不断触发，e.loaded表示已下载的字节数，e.total表示总字节数。通过计算e.loaded / e.total可以得到下载进度百分比。
- 创建下载链接: 下载完成后，创建一个标签，设置href为Blob URL，download属性为文件名，模拟点击下载。
这种方法可以提供精确的下载进度信息，并且可以自定义下载过程，例如显示进度条、取消下载等。但是，它也比直接使用标签下载Blob要复杂一些。
Blob URL的生命周期是多久？如何释放？
Blob URL，也称为对象URL，是由URL.createObjectURL()方法创建的，它指向内存中的Blob对象。Blob URL的生命周期与创建它的document相关联。这意味着，只要创建Blob URL的document仍然存在，Blob URL就是有效的。
然而，Blob URL会占用内存资源。如果不及时释放，可能会导致内存泄漏，尤其是在处理大量Blob对象时。因此，在使用完Blob URL后，应该立即使用URL.revokeObjectURL()方法来释放它。
const blob = new Blob(["Hello, Blob!"], { type: "text/plain" }); const url = URL.createObjectURL(blob); // ... 使用 url URL.revokeObjectURL(url); // 释放 Blob URL
以下是一些关于Blob URL生命周期和释放的注意事项：
- 及时释放: 养成在使用完Blob URL后立即释放它的习惯。
- 避免在循环中创建Blob URL: 如果需要在循环中创建Blob URL，确保在每次循环结束后都释放它。
- 监听unload事件: 如果你的应用需要在页面卸载时释放Blob URL，可以监听window.onunload事件。
window.onunload = function() { // 释放所有 Blob URL for (const url in blobUrls) { URL.revokeObjectURL(url); } };
- 使用框架或库: 如果你使用框架或库来管理Blob对象，它们通常会提供自动释放Blob URL的机制。
正确管理Blob URL的生命周期对于避免内存泄漏和提高应用性能至关重要。
