HTML5在QQ邮箱移动Web应用的实践

1. HTML5在QQ邮箱移动Web应用的实践腾讯广州研发中心谭正谊(terrytan)

2. HTML5应用于iPhone/Android QQ邮箱

3. 移动Web应用

4. 性能优化

5. 能力扩展

6. 更多展望HTML5移动Web应用实践

7. 原生实现体验最佳，但多平台实现成本高，更新难。Web实现容易实现，跨平台，但性能差，权限限制。混搭实现兼原生和Web实现的优点，但原生与JS交互有额外成本。移动应用-Web实现

8. 独立运行不依赖额外发布渠道，可嵌于QQ的WebView平滑升级作为手机邮箱的升级版本，保留用户习惯技术复用复用Web开发技术和模式移动应用-Web实现-动机

9. 移动Web应用

10. 性能优化

11. 能力扩展

13. 性能优化-定时

14. 性能优化-定时-setTimeout测算function timeoutLoop(time, ref, finish){setTimeout(function() {var cur = +new Date, interval = cur - ref.last;debug([time--, interval]);ref.time += interval; ref.last = cur; time ? timeoutLoop(time, ref, finish) : finish(ref); },20);}function argLoop(time){timeoutLoop(time, {time : 0, last : +new Date}, function(ref) {print(ref.time / time); });}argLoop(500);500次的平均时间(无差别)iPad 3.2： 21.8714ms chromium7： 21.0578ms前10次的标准差(iPad前几次不稳定)iPad 3.2： 37.0071 chromium7： 2.1212

15. 性能优化-定时-优化transition : opacity 200ms ease 2s;

16. 性能优化-滚动条

17. Sencha TouchJS实现，但过于复杂，性能差iScrollCSS3实现，但过于简单，体验粗糙自研QMScrollCSS3实现，针对iOS/Android使用场景优化连续滚动加速边缘反馈等等等性能优化-滚动条-比较

18. 性能优化-滚动条-CSS3实现硬件加速！transform:translate3d(x,y,0)transition-timing-functionBezier动画

19. GIF动画流量大，速度慢，有毛边Canvas+CSS3动画流量小，速度稳定，质量高性能优化-Canvas动画

20. 移动Web应用

21. 性能优化

22. 能力扩展

24. MVC搭建AppM层在手机/平板版本共用，VC层独立Cache存储所有数据都经过Cache处理可离线离线状态，可读本地存储数据到Cache后运行能力扩展-搭建可离线应用

25. Application Cache Manifest指定离线的页面和资源文件Web SQL Database(SQLite)离线存储，在iOS/Android已实现的停滞标准IndexedDB离线存储，在iOS/Android未实现的现行标准能力扩展-离线实现可参考我的《HTML5离线应用》分享http://gzterrytan.cnblogs.com/archive/2011/04/09/gz_html5_tech_salon.html

26. 移动Web应用

27. 性能优化

28. 能力扩展

30. 原生体验暂不可替代交互性能和Push、联系人等权限不可替代逐步扩展是条出路WebApp不该单纯，可根据环境而扩展能力混搭需谨慎混搭不是万能，混搭也有成本更多展望

31. Q & A

32. 谢谢！！欢迎加入QQ邮箱团队-JS开发gzterrytan@qq.com谭正谊

HTML5在QQ邮箱移动Web应用的实践

More Related Content

Similar to HTML5在QQ邮箱移动Web应用的实践 (7)

HTML5在QQ邮箱移动Web应用的实践