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

QQ邮箱HTML5移动应用腾讯广州研发部 terrytan （谭正谊）

HTML5 的角色

以往的 Flash

• 以插件形式扩展 RIA 能力

通信控件 多媒体

现代 HTML5

• 浏览器通过标准，提供系统能力

控件方式 原生方式

HTML5 给 Web 开发注入新动力

如何应用？

领域

桌面端• 浏览器市场份额

IE; 43.54%

FireFox; 28.39%

Chrome; 20.63%

Safari; 5.08% Opera; 1.74% Other; 0.61%

IE; 86.83%

Chrome; 4.94

%

Max-thon; 3.72

%

FireFox; 3.19%Safari; 0.73%Other; 0.57%

全球 国内数据来源： http://www.cnbeta.com/articles/147034.htm

桌面端• 传统 Web 的领地• 国外– 有较好的 HTML5 应用条件

• 国内– HTML5 暂只能服务 10% 用户，更适合于优化

移动端• 2012 以后…

移动端• iPhone 势头很猛• Android 也在发力• 魅族，阿里云，小米在跟进，还有更多…

领域

• 相对桌面端，移动端有更多 HTML5 发挥空间

手机应用

手机应用• 系统较集中（ iOS/Android/WP7? ）• 系统与应用升级方便（授权 +App

Store ）• 内置支持 HTML5 的浏览器

传统 App

• 产品– 特定的习惯与体验– 长期使用，主动关注 / 消息推送

• 运营– 需要安装、更新– 功能稳定、粘度高

WebApp

• 产品–Web 产品的手机延伸– 目的性强，从 App 跳转 / 内嵌

• 运营– 即用即有– 跨平台，适合快速迭代

混搭 App

• 产品–WebApp 延伸– 需要摄像头、文件访问、联系人等扩展– 补足 Web 交互体验

• 运营– 跨平台，与 WebApp 复用

挑战

挑战 - 网络限制– 对于 GPRS 用户，有网速限制– 对于 3G 用户，有流量限制– 所以节省流量依然是主题

挑战 - 网络限制• 减少请求数– 合并 JS 、 CSS– 图片 Base64 压缩

http://www.greywyvern.com/code/php/binary2base64

挑战 - 网络限制• 减少流量– Canvas + CSS3 替代 GIF

• Cache– Application Cache Manifest

– 本地存储

http://diveintohtml5.org/offline.html

挑战 -Web 性能• Web 应用交互体验比不上客户端应用• 所以 Web 应用需要更多优化

挑战 -Web 性能• 响应加速– touch 替代 click 事件，取消延迟

• 动画加速– translate3d 硬件加速

• 慎用 CSS3 效果– 过量渐变，阴影可导致页面迟缓

http://cubiq.org/remove-onclick-delay-on-webkit-for-iphonehttp://www.mobigeni.com/2010/09/22/how-to-use-hardware-accelerated-css3-3d-transitions-on-ipad-and-iphone/

挑战 -Web 性能• 原生体验– 原生菜单– 原生动画– 原生页面固定

• 混搭方式解决

展望

展望• 技术– HTML5 较完整， 2012 候选， 2022 推荐– 无论桌面端还是移动端，各大厂商积极支持– HTML5成为各大平台竞争的争夺点

• 产品– WebApp日渐广泛而重要– 出现优秀的兼容方案（ jQuery ， PhoneGap ）

• 职业– 扩充前端开发手段，逼近客户端开发– 提供更合理手段解决更多 Web 问题

Q&A

谢谢