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

腾讯广州研发中心 谭正谊(terrytan)
HTML5在QQ邮箱 移动Web应用的实践
HTML5应用于
iPhone/Android QQ邮箱
移动Web应用
性能优化
能力扩展
更多展望
HTML5移动Web应用实践
原生实现
体验最佳,但多平台实现成本高,更新难。
Web实现
容易实现,跨平台,但性能差,权限限制。
混搭实现
兼原生和Web实现的优点,但原生与JS交互有额外成本。
移动应用-Web实现
独立运行
不依赖额外发布渠道,可嵌于QQ的WebView
平滑升级
作为手机邮箱的升级版本,保留用户习惯
技术复用
复用Web开发技术和模式
移动应用-Web实现-动机
性能优化-定时
性能优化-定时-setTimeout测算
function timeoutLoop(time, ref, finish)
{
setTimeout(function()
{
var cur = +new Date,
interval = cur - ;
debug([time--, interval]);
+= interval; = cur;
time ? timeoutLoop(time, ref, finish) : finish(ref);
},20);
}
function argLoop(time)
{
timeoutLoop(time, {time : 0, last : +new Date}, function(ref)
{
print( / time);
});
}
argLoop(500);
500次的平均时间(无差别)
iPad :
chromium7:
前10次的标准差(iPad前几次不稳定)
iPad :
chromium7:
性能优化-定时-优化
transition : opacity 200ms ease 2s;
性能优化-滚动条