HTML5在QQ邮箱移动Web应用的实践_精品.pptVIP

腾讯广州研发中心 谭正谊(terrytan) HTML5在QQ邮箱 移动Web应用的实践 1 HTML5应用于 iPhone/Android QQ邮箱 2 移动Web应用 性能优化 能力扩展 更多展望 HTML5移动Web应用实践 3 原生实现 体验最佳，但多平台实现成本高，更新难。 Web实现 容易实现，跨平台，但性能差，权限限制。 混搭实现 兼原生和Web实现的优点，但原生与JS交互有额外成本。 移动应用-Web实现 4 独立运行 不依赖额外发布渠道，可嵌于QQ的WebView 平滑升级 作为手机邮箱的升级版本，保留用户习惯 技术复用 复用Web开发技术和模式 移动应用-Web实现-动机 5 移动Web应用 性能优化 能力扩展 更多展望 HTML5移动Web应用实践 6 性能优化-定时 7 性能优化-定时-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 8 性能优化-定时-优化 transition : opacity 200ms ease 2s; 9 性能优化-滚动条 10 Sencha Touch JS实现，但过于复杂，性能差 iScroll CSS3实现，但过于简单，体验粗糙 自研QMScroll CSS3实现，针对iOS/Android使用场景优化 连续滚动加速 边缘反馈 等等等 性能优化-滚动条-比较 11 性能优化-滚动条-CSS3实现 transform:translate3d(x,y,0) transition-timing-function 硬件加速！ Bezier动画 12 GIF动画 流量大，速度慢，有毛边 Canvas+CSS3动画 流量小，速度稳定，质量高 性能优化-Canvas动画 13 移动Web应用 性能优化 能力扩展 更多展望 HTML5移动Web应用实践 14 MVC搭建App M层在手机/平板版本共用，VC层独立 Cache存储 所有数据都经过Cache处理 可离线 离线状态，可读本地存储数据到Cache后运行 能力扩展-搭建可离线应用 15 Application Cache Manifest 指定离线的页面和资源文件 Web SQL Database(SQLite) 离线存储，在iOS/Android已实现的停滞标准 IndexedDB 离线存储，在iOS/Android未实现的现行标准 能力扩展-离线实现 可参考我的《HTML5离线应用》分享 /archive/2011/04/09/gz_html5_tech_salon.html 16 移动Web应用 性能优化 能力扩展 更多展望 HTML5移动Web应用实践 17 原生体验暂不可替代 交互性能和Push、联系人等权限不可替代 逐步扩展是条出路 WebApp不该单纯，可根据环境而扩展能力 混搭需谨慎 混搭不是万能，混搭也有成本 更多展望 18 Q A 19 欢迎加入QQ邮箱团队-JS开发 gzterrytan@ 谭正谊 谢谢！！ 20