谭正谊-QQ邮箱HTML5移动应用

2,637 views

Published on

谭正谊,Web前端开发,就职于腾讯广州研发部。曾参与QQ邮箱JS开发框架的设计与实现,现主要负责QQ邮箱触屏版开发。

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,637
On SlideShare
0
From Embeds
0
Number of Embeds
155
Actions
Shares
0
Downloads
109
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

谭正谊-QQ邮箱HTML5移动应用

  1. 1. QQ邮箱HTML5移动应用<br />腾讯广州研发部terrytan(谭正谊)<br />
  2. 2. HTML5的角色<br />
  3. 3. 以往的Flash<br />以插件形式扩展RIA能力<br />通信控件<br />多媒体<br />
  4. 4. 现代HTML5<br />浏览器通过标准,提供系统能力<br />控件方式<br />原生方式<br />
  5. 5. HTML5给Web开发注入新动力<br />如何应用?<br />
  6. 6. 领域<br />
  7. 7. 桌面端<br />浏览器市场份额<br />全球<br />国内<br />数据来源:http://www.cnbeta.com/articles/147034.htm<br />
  8. 8. 桌面端<br />传统Web的领地<br />国外<br />有较好的HTML5应用条件<br />国内<br />HTML5暂只能服务10%用户,更适合于优化<br />
  9. 9. 移动端<br />2012以后…<br />
  10. 10.
  11. 11.
  12. 12. 移动端<br />iPhone势头很猛<br />Android也在发力<br />魅族,阿里云,小米在跟进,还有更多…<br />
  13. 13. 领域<br />相对桌面端,移动端有更多HTML5发挥空间<br />
  14. 14. 手机应用<br />
  15. 15. 手机应用<br />系统较集中(iOS/Android/WP7?)<br />系统与应用升级方便(授权+App Store)<br />内置支持HTML5的浏览器<br />
  16. 16. 传统App<br />产品<br />特定的习惯与体验<br />长期使用,主动关注/消息推送<br />运营<br />需要安装、更新<br />功能稳定、粘度高<br />
  17. 17. WebApp<br />产品<br />Web产品的手机延伸<br />目的性强,从App跳转/内嵌<br />运营<br />即用即有<br />跨平台,适合快速迭代<br />
  18. 18. 混搭App<br />产品<br />WebApp延伸<br />需要摄像头、文件访问、联系人等扩展<br />补足Web交互体验<br />运营<br />跨平台,与WebApp复用<br />
  19. 19. 挑战<br />
  20. 20. 挑战-网络限制<br />对于GPRS用户,有网速限制<br />对于3G用户,有流量限制<br />所以节省流量依然是主题<br />
  21. 21. 挑战-网络限制<br />减少请求数<br />合并JS、CSS<br />图片Base64压缩<br />http://www.greywyvern.com/code/php/binary2base64<br />
  22. 22. 挑战-网络限制<br />减少流量<br />Canvas+CSS3替代GIF<br />Cache<br />Application Cache Manifest<br />本地存储<br />http://diveintohtml5.org/offline.html<br />
  23. 23. 挑战-Web性能<br />Web应用交互体验比不上客户端应用<br />所以Web应用需要更多优化<br />
  24. 24. 挑战-Web性能<br />响应加速<br />touch替代click事件,取消延迟<br />动画加速<br />translate3d 硬件加速<br />慎用CSS3效果<br />过量渐变,阴影可导致页面迟缓<br />http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone<br />http://www.mobigeni.com/2010/09/22/how-to-use-hardware-accelerated-css3-3d-transitions-on-ipad-and-iphone/<br />
  25. 25. 挑战-Web性能<br />原生体验<br />原生菜单<br />原生动画<br />原生页面固定<br />混搭方式解决<br />
  26. 26. 展望<br />
  27. 27. 展望<br />技术<br />HTML5较完整,2012候选,2022推荐<br />无论桌面端还是移动端,各大厂商积极支持<br />HTML5成为各大平台竞争的争夺点<br />产品<br />WebApp日渐广泛而重要<br />出现优秀的兼容方案(jQuery,PhoneGap)<br />职业<br />扩充前端开发手段,逼近客户端开发<br />提供更合理手段解决更多Web问题<br />
  28. 28. Q&A<br />
  29. 29. 谢谢<br />

×