基于HTML5技术的文件上传

 基于HTML5技术的文件上传

WebUploader是个以HTML5为主、FLASH为辅的文件上传组件。在充分发挥HTML5的优势,同时又兼容IE浏览器。这次分享将介绍WebUploader是如何利用文件的分片并发上传功能来提高上传效率,已经如何支持秒传和断点续传等扩展功能。

09ea2a62798550460527ab1cec5e8123?s=128

Baidu FEX Team

March 29, 2014
Tweet

Transcript

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

  2. 功能演示

  3. 文件上传方式 • 文件表单 • 文件表单 + IFRAME • FLASH •

    HTML5 ✗ ✗
  4. HTML5 VS FLASH 功能描述 FLASH HTML5 多选 ✓ ✓ 格式过滤

    ✓ ✓ 拖拽 ✗ ✓ 截屏粘贴 ✗ ✓ Cookie & Session ✗ ✓ 文件读取速度 ✓ ✓ 150% faster 图片预览&裁剪 ✓ ✓ 200% faster 文件上传 ✓ ✓ 10% faster 进度跟踪 ✓ ✓ 更加精准 以下是与文件上传相关的功能对比图。
  5. 可以放心使用HTML5吗?

  6. 当然可以! HTML5: 62%

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

  8. 上传前优化选型 • 图片压缩。 – 5M jpeg(5184×3456) => (1600x1600) 407KB 压缩比7%。

    • ZIP合并小文件。 – ZIP效率低,仅使用与2G网络。 • 合并小图片。 – 运算快10倍于zip, 总体20%提速。 ✓
  9. 普通的文件上传问题 • 单一文件上传速度不理想。 • 网络不稳定,导致重传。

  10. 不同并发对比图 0 50 100 150 200 250 1 2 3

    4 5 6 并发越多,速度越快。
  11. 最佳并发数 • 更多的并发会增加服务端压力。 • 不要高于浏览器允许的最大并发数。 • 并发数从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 ?
  12. 为什么并发更快? • 多请求抢占带宽。 • 跨域时,并发可以共用options验证请求。 • 服务器端可能针对单一请求限速。

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

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

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

  16. 分片带来的额外开销情况 0 20 40 60 80 100 120 不分片 5M

    4M 3M 2M 1M 768K 512K 256K 时间花费(秒) 以下是在网络比较畅通的情况下,通过并行上传3个33M大小的文件得出 的数据。
  17. • 分片越小,请求数越多,开销越大。 • 分片越大,灵活度越小。 • 整数倍client_body_buffer_size (n x 256K)。 选择合适的分块大小

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

  19. 如何标识一个分块? 文件名 + 分块编号? 文件名 + 文件大小 + 分块编号? 文件名

    + 文件大小 + 修改时间 + 分块编号? 不精准,采用MD5分块内容。
  20. 分片可以秒传,那么整个文件呢? MD5时间花费表(秒)。 0 2 4 6 8 10 12 14

    16 2M 5M 10M 20M 50M 100M 150M 200M
  21. • 验证过程提前到当前文件的传输期。 • 小文件优先处理,减少用户等待时间。 • 更换序列化算法,取段MD5。 从算法上去优化

  22. 总结  功能演示  HTML5 VS FLASH  图片压缩 

    并发与分片上传  断点续传与秒传
  23. 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/