JS `File System Access API` `Stream Writers` / `Stream Readers` 的性能 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

嘿，各位代码爱好者们！今天咱们来聊聊前端界一个有点神秘，但又非常实用的家伙—— File System Access API 中的 Stream Writers 和 Stream Readers。别担心，这玩意儿听起来高大上，其实用起来挺接地气儿的。咱们的目标是搞清楚它们是干嘛的，以及性能咋样，顺便写点代码，让大家都能玩明白。

开场白：为什么我们需要Stream？

想象一下，你要处理一个 1GB 的超大文件。如果你一次性把整个文件读到内存里，那你的浏览器可能会直接崩溃给你看。这时候， Stream 就派上用场了。 Stream 就像一条河流，你可以一点一点地读取和写入数据，而不用一次性加载整个文件。这样既省内存，又能处理大型文件，简直是救星！

第一部分： File System Access API 快速入门

在深入 Stream Writers 和 Stream Readers 之前，我们先简单回顾一下 File System Access API。这玩意儿允许 Web 应用直接访问用户本地文件系统，听起来是不是有点危险？别慌，它有严格的权限控制，用户必须主动授权，你才能访问他们的文件。

1. 获取文件句柄 (File Handle)

首先，我们需要一个文件句柄，才能操作文件。这可以通过 showOpenFilePicker() 或 showSaveFilePicker() 方法获取。

async function openFile() {
  try {
    const [fileHandle] = await window.showOpenFilePicker(); // 打开文件选择器
    const file = await fileHandle.getFile(); // 获取 File 对象
    console.log("File Name:", file.name);
    console.log("File Size:", file.size);
    return fileHandle; // 返回文件句柄
  } catch (err) {
    console.error("打开文件失败:", err);
    return null;
  }
}

async function saveFile() {
  try {
    const fileHandle = await window.showSaveFilePicker({
      suggestedName: 'my_file.txt',
      types: [{
        description: 'Text files',
        accept: {'text/plain': ['.txt']},
      }],
    }); // 打开保存文件对话框
    return fileHandle; // 返回文件句柄
  } catch (err) {
    console.error("保存文件失败:", err);
    return null;
  }
}

2. File System Writable File Stream (WriteStream): 写入的艺术

有了文件句柄，就可以创建 FileSystemWritableFileStream 对象了。这就是我们的 Stream Writer，它允许我们向文件中写入数据。

async function writeFile(fileHandle, content) {
  try {
    const writableStream = await fileHandle.createWritable(); // 创建可写流
    await writableStream.write(content); // 写入数据
    await writableStream.close(); // 关闭流
    console.log("文件写入成功！");
  } catch (err) {
    console.error("文件写入失败:", err);
  }
}

3. File System Readable File Stream (ReadStream): 读取的智慧

类似地，我们也可以使用 getFile() 方法获取 File 对象，然后使用 stream() 方法创建一个 ReadableStream 对象。这就是我们的 Stream Reader，它允许我们从文件中读取数据。

async function readFile(fileHandle) {
  try {
    const file = await fileHandle.getFile();
    const readableStream = file.stream(); // 创建可读流
    const reader = readableStream.getReader(); // 获取 Reader
    let result = '';
    while (true) {
      const { done, value } = await reader.read();
      if (done) {
        break;
      }
      // value 是 Uint8Array，需要解码
      result += new TextDecoder().decode(value);
    }
    reader.releaseLock(); // 释放锁
    console.log("文件内容:", result);
    return result;
  } catch (err) {
    console.error("文件读取失败:", err);
    return null;
  }
}

第二部分：Stream Writers 的深度剖析

Stream Writers 提供了多种写入数据的方式，让我们来看看它们都有哪些绝活：

1. write() 方法：写入数据的万能钥匙

write() 方法是 Stream Writer 的核心。它可以接受多种类型的数据：

String: 直接写入字符串。
BufferSource: 写入 ArrayBuffer、TypedArray 或 DataView。
Blob: 写入 Blob 对象。

async function writeMultipleTypes(fileHandle) {
  try {
    const writableStream = await fileHandle.createWritable();

    // 写入字符串
    await writableStream.write("Hello, world!n");

    // 写入 ArrayBuffer
    const buffer = new TextEncoder().encode("This is an ArrayBuffer.n");
    await writableStream.write(buffer);

    // 写入 Blob
    const blob = new Blob(["This is a Blob.n"], { type: "text/plain" });
    await writableStream.write(blob);

    await writableStream.close();
    console.log("多种类型数据写入成功！");
  } catch (err) {
    console.error("多种类型数据写入失败:", err);
  }
}

2. seek() 方法：定位写入位置

seek() 方法允许我们将写入位置移动到文件的指定位置。这对于在文件中插入或覆盖数据非常有用。

async function seekAndWrite(fileHandle) {
  try {
    const writableStream = await fileHandle.createWritable();

    // 移动到文件末尾
    await writableStream.seek(10); //移动到第11个字节

    // 写入数据
    await writableStream.write("Inserted text!");

    await writableStream.close();
    console.log("定位写入成功！");
  } catch (err) {
    console.error("定位写入失败:", err);
  }
}

3. truncate() 方法：截断文件

truncate() 方法允许我们截断文件，只保留指定长度的内容。

async function truncateFile(fileHandle) {
  try {
    const writableStream = await fileHandle.createWritable();

    // 截断文件到 10 个字节
    await writableStream.truncate(10);

    await writableStream.close();
    console.log("文件截断成功！");
  } catch (err) {
    console.error("文件截断失败:", err);
  }
}

4. close() 方法：结束写入

close() 方法用于关闭 Stream Writer。在关闭之前，所有缓冲的数据都会被写入文件。务必在完成写入后调用 close() 方法。

第三部分：Stream Readers 的使用技巧

Stream Readers 允许我们以流的方式读取文件内容。

1. getReader() 方法：获取 Reader 对象

getReader() 方法用于获取 ReadableStreamDefaultReader 对象。通过 Reader 对象，我们可以从流中读取数据。

2. read() 方法：读取数据

read() 方法用于从流中读取数据。它返回一个 Promise，resolve 的结果包含两个属性：

done: 如果流已经结束，则为 true，否则为 false。
value: 包含读取到的数据的 Uint8Array。

async function readInChunks(fileHandle) {
  try {
    const file = await fileHandle.getFile();
    const readableStream = file.stream();
    const reader = readableStream.getReader();

    while (true) {
      const { done, value } = await reader.read();
      if (done) {
        break;
      }
      // 处理读取到的数据 (value 是 Uint8Array)
      console.log("读取到的数据:", new TextDecoder().decode(value)); //解码Uint8Array
    }

    reader.releaseLock();
    console.log("文件读取完成！");
  } catch (err) {
    console.error("文件分块读取失败:", err);
  }
}

3. cancel() 方法：取消读取

cancel() 方法用于取消读取操作。

4. releaseLock() 方法：释放锁

releaseLock() 方法用于释放 Reader 对象上的锁。在完成读取后，务必调用 releaseLock() 方法，以便其他 Reader 可以访问流。

第四部分：性能分析与优化

好了，重头戏来了！咱们来聊聊 Stream Writers 和 Stream Readers 的性能。

1. 性能指标

吞吐量 (Throughput): 每秒能写入或读取多少数据。
延迟 (Latency): 写入或读取一个数据块需要多长时间。
内存占用 (Memory Footprint): 操作过程中使用的内存量。
CPU 占用 (CPU Usage): 操作过程中占用的 CPU 资源。

2. 影响性能的因素

文件大小: 文件越大，操作时间越长。
数据块大小 (Chunk Size): 数据块大小会影响吞吐量和延迟。
硬件性能: CPU、内存和磁盘速度都会影响性能。
浏览器实现: 不同浏览器的实现可能会有差异。

3. 优化技巧

选择合适的数据块大小: 较大的数据块可以提高吞吐量，但可能会增加延迟。较小的数据块可以降低延迟，但可能会降低吞吐量。一般来说，4KB – 16KB 是一个不错的选择。
避免频繁的 seek() 操作: seek() 操作会带来额外的开销，尽量减少使用。
使用异步操作: 使用 async/await 可以避免阻塞主线程，提高用户体验。
使用 Transferable Objects: 如果需要在 Web Worker 中操作 Stream，可以使用 Transferable Objects 来避免数据复制，提高性能。
减少内存分配: 尽量重用缓冲区，避免频繁的内存分配和释放。

4. 性能测试

为了更直观地了解性能，我们可以进行一些简单的测试。下面的代码演示了如何测试 Stream Writer 的吞吐量：

async function testWriteStreamPerformance(fileHandle, fileSizeInMB) {
  const chunkSize = 16 * 1024; // 16KB
  const totalBytes = fileSizeInMB * 1024 * 1024;
  const data = new Uint8Array(chunkSize); // 创建一个数据块
  // 填充数据块 (可选)
  for (let i = 0; i < chunkSize; i++) {
    data[i] = i % 256; // 填充一些数据
  }

  const writableStream = await fileHandle.createWritable();
  const startTime = performance.now();

  let bytesWritten = 0;
  while (bytesWritten < totalBytes) {
    const bytesToWrite = Math.min(chunkSize, totalBytes - bytesWritten);
    await writableStream.write(data.slice(0, bytesToWrite));
    bytesWritten += bytesToWrite;
  }

  await writableStream.close();
  const endTime = performance.now();

  const duration = (endTime - startTime) / 1000; // 秒
  const throughput = fileSizeInMB / duration; // MB/s

  console.log(`写入 ${fileSizeInMB} MB 文件耗时: ${duration.toFixed(2)} 秒`);
  console.log(`吞吐量: ${throughput.toFixed(2)} MB/s`);
}

// 使用示例
(async () => {
  const fileHandle = await saveFile(); // 获取文件句柄
  if (fileHandle) {
    await testWriteStreamPerformance(fileHandle, 100); // 写入 100MB 文件
  }
})();

同样，我们也可以测试 Stream Reader 的吞吐量：

async function testReadStreamPerformance(fileHandle, fileSizeInMB) {
    const chunkSize = 16 * 1024; // 16KB
    const totalBytes = fileSizeInMB * 1024 * 1024;
    const file = await fileHandle.getFile();
    const readableStream = file.stream();
    const reader = readableStream.getReader();

    const startTime = performance.now();
    let bytesRead = 0;

    while (true) {
        const { done, value } = await reader.read();
        if (done) {
            break;
        }
        bytesRead += value.length;
    }

    reader.releaseLock();
    const endTime = performance.now();
    const duration = (endTime - startTime) / 1000; // 秒
    const throughput = fileSizeInMB / duration; // MB/s

    console.log(`读取 ${fileSizeInMB} MB 文件耗时: ${duration.toFixed(2)} 秒`);
    console.log(`吞吐量: ${throughput.toFixed(2)} MB/s`);
}

// 使用示例
(async () => {
    const fileHandle = await openFile(); // 获取文件句柄
    if (fileHandle) {
        await testReadStreamPerformance(fileHandle, 100); // 读取 100MB 文件
    }
})();

第五部分：真实场景应用

Stream Writers 和 Stream Readers 在很多场景下都能发挥重要作用：

大型文件上传/下载: 可以使用 Stream 将文件分块上传或下载，避免内存溢出。
视频/音频处理: 可以使用 Stream 实时处理视频或音频数据。
日志记录: 可以使用 Stream 将日志数据写入文件。
数据库导入/导出: 可以使用 Stream 将数据库数据导入或导出到文件。
PWA 应用: 在 PWA 应用中，可以使用 Stream 来实现离线存储和数据同步。

第六部分：常见问题解答

Q: 为什么我的写入速度很慢？
- A: 检查数据块大小是否合适，避免频繁的 seek() 操作，确保使用异步操作。
Q: 为什么我的内存占用很高？
- A: 尽量重用缓冲区，避免频繁的内存分配和释放。
Q: Stream Writers 和 Stream Readers 的兼容性如何？
- A: File System Access API 还在发展中，兼容性可能因浏览器而异。建议使用 Feature Detection 来判断浏览器是否支持。

第七部分：总结

File System Access API 中的 Stream Writers 和 Stream Readers 是处理大型文件的利器。通过合理地使用它们，我们可以提高 Web 应用的性能和用户体验。掌握了这些技巧，你就可以轻松地处理各种文件操作了！

表格： Stream Writers 和 Stream Readers 的方法对比

方法	Stream Writers (FileSystemWritableFileStream)	Stream Readers (ReadableStreamDefaultReader)	描述
`write()`	✅	❌	写入数据到流中。
`read()`	❌	✅	从流中读取数据。
`seek()`	✅	❌	移动写入位置到文件的指定位置。
`truncate()`	✅	❌	截断文件到指定长度。
`close()`	✅	❌	关闭流，完成写入操作。
`cancel()`	❌	✅	取消读取操作。
`releaseLock()`	❌	✅	释放 Reader 对象上的锁，允许其他 Reader 访问流。

彩蛋：浏览器兼容性检测

function isFileSystemAPISupported() {
  return 'showOpenFilePicker' in window &&
         'FileSystemFileHandle' in window &&
         'FileSystemWritableFileStream' in window;
}

if (isFileSystemAPISupported()) {
  console.log("File System Access API is supported!");
} else {
  console.warn("File System Access API is not supported in this browser.");
}

好了，今天的分享就到这里。希望大家有所收获，以后在处理文件的时候，可以更加得心应手！记住，多写代码，多实践，才能真正掌握这些技术！

发表回复 取消回复

发表回复取消回复