Casual & Fellow

再谈Phonegap应用优化-启动闪屏问题

兴高采烈地到了应用收尾的界面优化阶段,可是问题突然出现了。就是进入应用的时候出现了闪屏的问题。说白了就是性能的问题。因为首次进入应用的时候,我们要做的就是要渲染首页的html+css,这个时候资源一多就会慢。下面就来说说处理的办法。

我们都知道在Phonegap的应用里面,有个Cordova.plist的配置文件,这个文件中有一个AutoHideSplashScreen的设置项,这里就是设置启动页是否自动隐藏的。这里就存在一个问题了,这里的自动隐藏并不是基于Phonegap把你的资源渲染完毕就隐藏的,而是资源加载完毕就自动隐藏的。所以我们就应该在这里调为手动隐藏了。设置办法就是:AutoHideSplashScreen的布尔值改为:NO.好了,这个时候你可以把你的app Build一下,这个时候你就会发现,你的app一直都停留在启动页面。下一步我们就是要将启动页面手动地隐藏掉。

在Phonegap里面,也就是Cordova里面,有很多控制App的内置函数和方法,例如alert,confirm这些基本的提示框。同理,我们也可以关闭启动页面。具体代码就是下面这一句话:

function onDeviceReady(){
    setTimeout("cordova.exec(null, null, 'SplashScreen', 'hide', [])",2000);
}

为什么要setTimeout呢?因为我们在渲染整个页面的时候,是需要时间的,我们期望的是渲染完页面之后才关闭这个启动页面,而实际上渲染完整个页面需要多少时间呢,这个就需要自己去写脚本测试,把渲染的时间print出来,具体print出来的时间就可以在setTimeout中加入。注意的是这段setTimeout的函数,要在DeviceReady后才去调用,不然的话这里就不能够用cordova调用底层函数,关闭启动页面。这里为什么我要强调说要测试这个渲染的时间呢?原因是我尝试过不去设置setTimeout,让app一直停留在启动页面上,实际上这个App已经渲染好界面,而点击“启动页”的时候,实际上也可以操作这个App,只是这个元素都被埋藏在下面,这就可能会导致用户产生误操作。这里必须要控制好。

此外Phonegap的app启动的时候都会有一个loading的小菊花,这也会影响app的体验,这里我们需要关掉这个小菊花。方法还是很简单,也是在Cordova.plist文件中,找到ShowSplashScreenSpinner的选项,把布尔值改为:NO就可以了。这时候小菊花就被隐藏掉了。

其实这么多小问题,归根结底都是性能问题,今天早上也看到新闻说Facebook用原生的方式把App重写了,其实也同样是因为性能问题。苹果似乎不太欢迎这些Hybrid的应用,所以渲染速度上,UIWebView的性能要比Safari的慢。这里就要求我们开发人员在做HybridApp的时候,更多地在Js层面上,用异步编程,让程序的每个交互顺序执行,保证到App的流畅性。所以有些时候觉得,Hybrid App可能比Native更讲究技术性。大家加油吧!