关于大文件分块上传,这里推荐一篇文章。没想到是字节跳动的前端面试题。
这篇文章对大文件分块上传整体的实现思路描述得比较全面,然而在实际的业务开发中还会遇到一些细节问题。
比如:文件分块后,直接用 Promise.all 发起所有上传请求是否会有性能问题?
由于 HTTP1.x 不支持多路复用,所以浏览器每发起一个 HTTP请求就会打开一个 TCP 会话。对于大多数浏览器,每个主机(域名)最多同时支持6个 TCP 连接。也就意味着客户端每次最多只能并发6个请求。当请求数超过限制后,后续的请求必须得排队等候。有些面试也会问怎么优化请求资源加载,常见的做法就是增加新的域名分区。
目前,市面上大部分还是以 HTTP1.x 为主,使用 Promise.all 并发所有请求,是会阻塞后续的请求,假设此时用户在网页有其他的请求交互,那么界面就会有一直处于 loading 状态直到原先的排队请求都得到响应。 (提示正在等待可用的套接字...)
我们既想同时上传多个小块文件,又不能越过并行6个请求的限制,就需要进行队列管理。
假设,我们每次并发 4 个上传文件的请求,这样能确保还剩 2 个连接数以支持用户在页面进行其他的交互。
这4个请求里,任意一个请求得到响应之后,马上发起下一个请求,以充分利用请求的资源。
我们再完善下业务场景,此时若一文件体积为 50M,我们以 5M 为一块,那么则需要上传 10 个文件块。
ATM(异步任务管理队列)
我们来通过引入一个 ATM 来帮助我们管理这些事情。 项目地址
yarn add x-atm
复制代码import ATM from