JS Fetch获取部分内容：Range与slice的区别对比

核心区别 #

• 请求阶段的本质差异
  • Range请求：在HTTP请求头里直接告知服务器「只返回指定字节范围的内容」，服务器会直接返回对应片段（状态码206 Partial Content），不会传输整个文件。
  • Blob.slice：先完整下载整个文件到浏览器内存/缓存，再在客户端对已下载的Blob对象做切片处理，本质是本地截取。

性能对比（大文件读小片段场景） #

Range请求肯定更快，差距会随着文件体积增大、截取片段变小而愈发明显：

• 比如读取几GB文件的10字节片段，Range只需要下载这10字节；而slice要先把整个GB级文件下载完成，再做本地截取，带宽消耗、等待时间都不是一个量级。
• 注意：如果服务器不支持Range请求（返回状态码200 OK和完整文件），两种方法的性能就没有差异了，所以使用Range前最好确认服务器支持该特性。

Range请求的额外优势 #

• 多范围一次性读取：可以通过Range: bytes=0-99, 200-299, 500-这类格式，一次请求多个不连续的字节段，服务器会返回multipart/byteranges格式的响应，一次性拿到所有目标片段，避免多次HTTP请求的连接开销。
• 断点续传的基础：这是Range最实用的场景之一，文件下载中断后，下次请求可以指定从上次中断的字节位置开始（比如Range: bytes=102400-），无需重新下载整个文件。
• 降低服务器负载：服务器不需要读取并返回整个大文件，只需要读取指定字节范围的内容，磁盘IO开销大幅降低，尤其适合大文件密集访问的场景。
• 灵活的范围控制：支持多种范围写法：
  • 只指定起始位置：bytes=1000-（从第1000字节到文件末尾）
  • 只指定末尾长度：bytes=-500（取文件最后500字节）
  • 精确指定起止：bytes=990-999（取第990到999字节，共10字节）

内容的提问来源于stack exchange，提问作者Friedrich -- Слава</think_never_used_51bce0c785ca2f68081bfa7d91973934>