JavaScript中使用stream()进行File分块读取的优势探讨

在处理浏览器端用户拖拽的大文件时，为避免一次性加载到内存，通常会采用分块读取的方式，目前有两种主流方案将File转为Uint8Array块：

两种分块读取方案 #

• slice()方案：调用File.slice(start, end)获取子Blob，再通过new FileReader().readAsArrayBuffer(blob)读取，最后将得到的ArrayBuffer转换为Uint8Array。
• stream()方案：调用File.stream().getReader().read()，通过ReadableStream -> ReadableStreamDefaultReader流程，read()的.value会直接返回Uint8Array。

已知差异 #

• 出现时间：slice()是更早的API，stream()属于较新的标准API。
• 缓冲区控制：slice()支持自定义缓冲区大小，当前主流浏览器中stream()的缓冲区大小固定为64 KiB。

从灵活性来看，slice()支持随机访问（便于并行处理分块），且可自定义缓冲区大小（比如hash-wasm库在大缓冲区下运行速度更快），优势明显。

stream()的优势分析 #

针对stream()是否存在独特优势的问题，以下是具体分析：

1. 预读取与背压优化
   stream()基于浏览器原生的ReadableStream实现，内置了背压机制，可以根据消费端的处理速度自动调整读取节奏，避免内存溢出。同时浏览器会在后台进行预读取优化：当消费端处理当前块时，浏览器会提前读取下一块数据，减少等待时间，这种优化是slice()方案需要手动实现的。

2. 网络挂载文件的支持与性能
   对于本地网络挂载的文件（比如SMB/NFS共享文件），stream()的表现更稳定：

• slice()每次调用都需要发起新的文件范围请求，对于网络挂载的文件，多次请求会带来额外的网络开销；而stream()会建立持续的流连接，减少请求次数，降低延迟。
• 部分浏览器对slice()读取网络挂载文件的范围请求支持有限，可能出现读取失败或性能波动，而stream()作为标准流API，在这类场景下的兼容性和稳定性更好。

3. API的简洁性与组合性
   stream()可以和其他Web Stream API（如TransformStream、WritableStream）无缝组合，比如可以直接将文件流通过管道传输到加密、压缩等处理流中，无需手动管理分块和转换，代码更简洁易维护。而slice()需要手动处理分块的顺序、拼接和错误处理，代码复杂度更高。

内容的提问来源于stack exchange，提问作者nh2