你有没有遇到过这种情况：打开一个网页，图片半天出不来，视频卡在99%，等得人直跺脚？其实，很多网站早就用上了“分片下载”这招，把大文件拆成小块同时下载，速度立马提升一大截。尤其是静态资源，比如JS、CSS、图片、字体这些不会变的内容，特别适合用这种方式优化。
什么是静态资源分片下载
简单说，就是把一个大文件（比如一个5MB的JavaScript文件）切成几段，浏览器同时发起多个请求，分别下载每一段。等所有片段都到手了，再拼起来使用。这个过程对用户是透明的，但体验上会明显感觉“快了”。
这种技术常见于CDN加速场景。比如你访问一个全国用户都在用的网站，服务器可以把同一个资源放在不同节点上，浏览器从离自己最近的几个节点并行拉取不同片段，效率自然高。
怎么实现分片下载
核心原理是利用HTTP协议的Range请求头。当你想只下载文件的一部分时，可以告诉服务器：“我要第1000到2000字节”。服务器如果支持，就会返回这部分数据，并带上状态码206（Partial Content）。
举个例子，你想分两片下载一个文件：
GET /static/app.js HTTP/1.1\r\nHost: example.com\r\nRange: bytes=0-4999\r\n\r\nGET /static/app.js HTTP/1.1\r\nHost: example.com\r\nRange: bytes=5000-9999\r\n\r\n服务器响应第一个请求时，会返回前5000字节，Content-Range类似：bytes 0-4999/10000。浏览器拿到后存起来，等另一片也到了，就合并处理。
前端能直接控制吗
普通页面直接写<script src="...">是没法手动分片的。但如果你用JavaScript动态加载资源，就可以自己实现。比如用fetch发带Range的请求：
const response = await fetch('/static/big-file.js', {\n headers: {\n 'Range': 'bytes=0-4999'\n }\n});\nconst blob = await response.blob();注意：不是所有服务器都默认支持Range请求。需要后端开启Accept-Ranges头，比如返回Accept-Ranges: bytes，浏览器才知道它能分片拉。
实际应用场景
大型Web应用经常用构建工具把代码打包成几个chunk，本质也是一种分片。比如React项目用Webpack打包后，js文件自动拆开，按需加载。这虽然不是传统意义上的“下载同一文件的片段”，但思路一致：别一口吃成胖子，分散压力更高效。
还有些下载管理器，比如IDM，在下载网页上的大文件时会自动探测是否支持Range，支持就开多线程抢进度。你看到下载速度突然飙上去，很可能就是它在背后悄悄分片拉数据。
对于普通用户来说，不需要手动设置什么。但了解这个机制后，下次网速慢的时候，至少知道问题可能不在自己家宽带，而是网站没做优化。