几百 MB 文件为何开启需几分钟？

当你在浏览器中开始下载一个 500 MB 的 PDF、视频或安装包时往往需要等待数十秒甚至更久才能看到文件内容。这个“干等”体验让人抓狂：先下载，再打开，整个过程毫无效率。

至于痛点，等待时间长、带宽浪费、断网无恢复

- 10 Mbps 的网络速度下500 MB 需要约 66 秒完成；- 下载完毕后才可预览，让使用者无法即时确认文件是否完整；- 一旦网络中断，需要重新从头开始下载，浪费已下载的数据。

再看底层原理，HTTP 下载是怎么工作的

传统下载模型这方面。请求 → 等完整响应 → 打开

浏览器默认流程：

浏览器 → GET /big-file.pdf
服务器 → OK + 整个文件
浏览器 → 收完所有数据 → 打开

问题：500 MB 文件在 10 Mbps 时约需 66 秒；使用者只能在完成下载后才看到任何内容。

再看关键概念，HTTP Range 请求

Range 是 HTTP/1.1/HTTP/2 中支持按字节范围请求的头部字段：

GET /big-file.pdf
Range这方面。bytes=0-1048575 ← 只请求前 1 MB
Accept-Ranges: bytes
Content-Range: bytes 0-1048575/524288千

意义：将大文件拆成若干块，只取所需范围即可，无须等待全部到齐。

再看流式接收，浏览器如何逐块处理数据？

Status：The response body is delivered as a stream of chunks.

服务器发送：...
至于浏览器接收，←────── Stream ──────←

Trouble：The traditional `

Pain Point Summary – 使用者痛点再现

• "为什么我打开文件要等这么久？"
• "下载过程中网络掉线，我必须重新开始！"
• "我想先看前面几页就能判断是否值得继续下载"
• "大文件占满了带宽，却只能单线程传输"
• "多次更新后我又得从头再拉全量文件"

Evolve from Wait to Edge‑to‑Edge Preview

Step 1 – 整体下载后打开

const res = await fetch;
const blob = await res.blob;// 等待全部数据到齐
window.open);

Pain这方面，

• "完全等待完成后才可查看" → 长时间无反馈。
• "一次性占用大量内存" → 对低端设备不友好。
• "没有断点续传机制" → 网络不稳定时完全白费。

Step 2 – HTTP Range 分片下载

// 下载前 1 MB，仅供预览
const res = await fetch;const previewChunk = await res.arrayBuffer;怎么说呢，previewPDF;// 显示第一页或几个页面
// 后台继续拉取剩余部分
fetch.n).n(fullBlob => {
// 后续合并或继续预览
});

至于Result。

• "首屏预览只需 1 s'" 与 "整包耗时 60 s'" 的对比，让使用者立刻感知速度差异。
• "单连接仍然是瓶颈" – 带宽未利用。
• "仍然缺乏流式渲染与断点续传"

Pain Point Highlight:

• User sees nothing until first chunk arrives .
• User still waits for remaining data before any additional pages appear.
• If connection drops during remaining fetch,whole process restarts.
• No progress indicator beyond “downloading…怎么说呢，” text.
• No adaptive behavior when network speed fluctuates.
.