HTML5移动Web应用实践 谭正谊(terrytan) 1.移动Web应用 2.性能优化 3.能力扩展 4.更多展望

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

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

4. 性能优化

5. 能力扩展

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

10. 性能优化

11. 能力扩展

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

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. 性能优化-滚动条

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

21. 性能优化

22. 能力扩展

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

27. 性能优化

28. 能力扩展

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

31. Q & A

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