基于HTML5技术的文件上传

基于HTML5技术的文件上传 By 廖学芝 WebUplader上传组件分享

功能演示

文件上传方式 • 文件表单 • 文件表单 + IFRAME • FLASH •
HTML5 ✗ ✗

HTML5 VS FLASH 功能描述 FLASH HTML5 多选 ✓ ✓ 格式过滤
✓ ✓ 拖拽 ✗ ✓ 截屏粘贴 ✗ ✓ Cookie & Session ✗ ✓ 文件读取速度 ✓ ✓ 150% faster 图片预览&裁剪 ✓ ✓ 200% faster 文件上传 ✓ ✓ 10% faster 进度跟踪 ✓ ✓ 更加精准以下是与文件上传相关的功能对比图。

可以放心使用HTML5吗？

当然可以！ HTML5： 62%

性能优化 • 上传前的优化 • 上传过程中的优化

上传前优化选型 • 图片压缩。 – 5M jpeg(5184×3456) => (1600x1600) 407KB 压缩比7%。
• ZIP合并小文件。 – ZIP效率低，仅使用与2G网络。 • 合并小图片。 – 运算快10倍于zip，总体20%提速。 ✓

普通的文件上传问题 • 单一文件上传速度不理想。 • 网络不稳定，导致重传。

不同并发对比图 0 50 100 150 200 250 1 2 3
4 5 6 并发越多，速度越快。

最佳并发数 • 更多的并发会增加服务端压力。 • 不要高于浏览器允许的最大并发数。 • 并发数从3开始收益逐渐下降。浏览器 http1.1 http
1.0 IE 6, 7 2 4 IE8 6 6 Firefox2 2 8 Firefox3 6 6 Safari 3, 4 4 4 Chrome 1, 2 6 ? Chrome 3 4 4 Chrome 4+ 6 ?

为什么并发更快？ • 多请求抢占带宽。 • 跨域时，并发可以共用options验证请求。 • 服务器端可能针对单一请求限速。

普通的文件上传问题 • 单一文件上传速度不理想。 – 采用并发。 • 网络不稳定，导致重传。 – 采用分片

什么是分片上传？大文件分片1 分片2 分片3 分片3 分片4 分片5 分片6

还有哪些优势？ • 更强的容错能力。 • 可以模拟暂停与继续。 • 利用并发提速。 • 更精准的速度跟踪。

分片带来的额外开销情况 0 20 40 60 80 100 120 不分片 5M
4M 3M 2M 1M 768K 512K 256K 时间花费(秒) 以下是在网络比较畅通的情况下，通过并行上传3个33M大小的文件得出的数据。

• 分片越小，请求数越多，开销越大。 • 分片越大，灵活度越小。 • 整数倍client_body_buffer_size （n x 256K）。选择合适的分块大小
推荐2M - 5M!

有了分片，我们还能用来实现什么？如果能让服务端记住每个已成功上传的分片，客户端可选择跳过这类分块上传，我们就能实现断点续传。收益 • 节省流量，避免上传重复的分块。 • 减少用户等待时间。 • 可恢复的上传。

如何标识一个分块？文件名 + 分块编号？文件名 + 文件大小 + 分块编号？文件名
+ 文件大小 + 修改时间 + 分块编号？不精准，采用MD5分块内容。

分片可以秒传，那么整个文件呢？ MD5时间花费表（秒）。 0 2 4 6 8 10 12 14
16 2M 5M 10M 20M 50M 100M 150M 200M

• 验证过程提前到当前文件的传输期。 • 小文件优先处理，减少用户等待时间。 • 更换序列化算法，取段MD5。从算法上去优化

总结  功能演示  HTML5 VS FLASH  图片压缩 
并发与分片上传  断点续传与秒传

Thanks WebUploader： http://fex.baidu.com/webuploader/ Zip调研： https://github.com/fex- team/webuploader/tree/research/experiment/zip SPRITE调研： https://github.com/fex- team/webuploader/tree/research/experiment/sprites 上传调研：
https://github.com/fex- team/webuploader/tree/research/experiment/

基于HTML5技术的文件上传

基于HTML5技术的文件上传

Baidu FEX Team

More Decks by Baidu FEX Team

Other Decks in Programming

Featured

Transcript