axios下载大文件_前端多线程大文件下载实践，提速10倍(拿捏百度云盘)

背景

没错，你没有看错，是前端多线程，而不是。这一次的探索起源于最近开发中，有遇到视频流相关的开发需求发现了一个特殊的状态码，他的名字叫做 ~

时间对比(单线程 VS 10个线程)

服务器支持

Nginx

在版本nginx版本 1.9.8 后，(加上 ngx_http_slice_module)默认自动支持，可以将 设置为 的来取消这个设置。

Node

Node 默认不提供 对 方法的处理，需要自己写代码进行处理。

或者你可以使用 这个库。

https://github.com/pillarjs/send/blob/0.17.1/index.js#L680

Range实践

架构总览

我们先来看下流程架构图总览。单线程很简单，正常下载就可以了，不懂的可以参看我上一篇文章。多线程的话，会比较麻烦一些，需要按片去下载，下载好后，需要进行合并再进行下载。(关于blob等下载方式依旧可以参看上一篇)

探索失败的原因

我开始仔细对比两个请求，观察这两个请求的速度。

6个线程并发

我们按照3.7M 82ms 的速度来算的话，大约为 1ms 下载 46kb，而实际情况可以看到，533kb ，平均就要下载 20ms 左右(已经刨去了连接时间，纯 content 下载时间)。

我就去查找了一些资料，明白了有个叫做下行速度和上行速度的东西。

络的实际传输速度要分上行速度和下行速度，上行速率就是发送出去数据的速度，下行就是收到数据的速度。ADSL是根据我们平时上 ，发出数据的要求相对下载数据的较小这种习惯来实现的一种传输方式。我们说对于4M的宽带，那么我们的l理论最高下载速度就是512K/S，这就是所说的下行速度。 –百度百科

那我们现在的情况是怎么样的呢/p>

把服务器比作一根大水管，我来用图模拟一下我们单个线程和多个线程下载的情况。左侧为服务器端，右侧为客户端。(以下所有情况都是考虑理想情况下，只是为了模拟过程，不考虑其他一些程序的竞态影响。)

单线程

没错，由于我们的服务器是一根大水管，流速是一定的，并且我们客户端没有限制。如果是单线程跑的话，那么会跑满用户的最大的速度。如果是多线程呢，以3个线程为例子的话，相当于每个线程都跑了原先线程三分之一的速度。合起来的速度和单个线程是没有差别的。

下面我就分几种情况来讲解一下，什么样的情况才我们的多线程才会生效呢/p>

服务器带宽大于用户带宽，不做任何限制

这种情况其实我们遇到的情况差不多的。

服务器带宽远大于用户带宽，限制单连接 速

还记得上面说的吗，关于 同一站点只能并发 6 个请求，多余的请求会放到下一个批次。但是 不受这个限制，多路复用代替了 的序列和阻塞机制。让我们来升级 来测试一下。

需要本地生成一个证书。(生成证书方法: https://juejin.im/post/6844903556722475021)

10个线程

24个线程

实际应用探索

那么多进程下载到底有啥用呢错，开头也说了，这个分片机制是迅雷等下载软件的核心机制。

易云课堂

https://study.163.com/course/courseLearn.htmourseId=1004500008#/learn/videoessonId=1048954063&courseId=1004500008

我们打开控制台，很容易地发现这个下载 url，直接一个裸奔的 mp4 下载地址。

多线程下载

以一个 16.6M的文件为例。

打开 页版百度云盘的界面，点击下载

依旧用上述的 易云课程下载课程的脚本。只不过你需要改一下参数。

直接下载

百度云多单个TCP连接的限速，真的是惨无人道，足足花了217秒！！！就一个17M的文件，平时我们饱受了它多少的折磨。(除了VIP玩家)

由于是HTTP/1.1 因此我们只要开启6个以及以上的线程下载就好了。以下是多线程下载的速度，约用时 46 秒。

真香，免费且只靠我们前端自己实现了这个功能，太tm香了，你还不赶紧来试试

方案缺陷

1.对于大文件的上限有一定的限制

由于 在 各大浏览器有上限大小的限制，因此该方法还是存在一定的缺陷。

2. 服务器对单个TCP速度有所限制

一般情况下都会有限制，那么这个时候就看用户的宽度速度了。

结尾

文章写的比较仓促，表达可能不是特别精准，如有错误之处，欢迎各位大佬指出。

回头调研下，有没有 页版百度云加速的插件，如果没有就造一个 页版百度云下载的插件~。

参考文献

Nginx带宽控制 : https://blog.huoding.com/2015/03/20/423

openresty 部署 https 并开启 http2 支持  : https://www.gryen.com/articles/show/5.html

聊一聊HTTP的Range : https://dabing1022.github.io/2016/12/24/%E8%81%8A%E4%B8%80%E8%81%8AHTTP%E7%9A%84Range,%20Content-Range/

相关资源：3D建模软件(绿色版)_3d建模用什么软件好-专业指导文档类资源-CSDN…