已阅读:14,674 次
PhoneGap优化解决方案
ian | HTML,新技术研讨 | 2011/11/24


纵论PhoneGap一文中对PhoneGap和类似的跨平台技术做了简单的介绍,本文继续介绍PhoneGap的技术细节吧。PhoneGap是开源的,大家可以去官网下载源码自己来研究,下面只是简单分析一下它的实现原理。

首先大家会想到的问题就是,既然是做成native app,那么肯定会用到系统相关的api的呀?比如联系人呀、摄像头、陀螺仪等等……Html是怎么调用到这些系统api的呢?实际上,PhoneGap主要完成的功能就是这个:将这些几乎每个手机系统共有的功能特性按照各个系统平台系统的api,用js封装起来,通过js提供统一的调用接口,所以PhoneGap开发基本上无需关心系统实现,只用跟js代码打交道就好了。当然,这样通过js提供的接口很有限,当我们需要其他PhoneGap没有提供的系统功能时就只能自己动手了。

所以我们也要像PhoneGap一样,能够让native code和js code相互调用和通信,能够显现这个的话,那么我们就能对PhoneGap任意拓展了,甚至自己完成一个类PhoneGap框架。

以Android为例,下面介绍实现过程。

如何实现JS和Native Code 相互调用:

1 首先我们需要在Activity中加入一个WebView控件。

2 注册JS调用接口:

WebView.addJavascriptInterface(new runJavaScript(), "myjs");

runJavaScript是js回调的native code接口,具体代码如下:

final class runJavaScript{
        public void runOnAndroidJavaScript(final String str){
        	h.post(new Runnable(){
        	       public void run() {
                	    wv.loadUrl("javascript:get4Android("+ contactInfo + ")");
        		}
        	});
        }
}

3 从本地调用JS函数:CallByNative()是js中实现的一个方法,可以通过下面的接口直接调用js文件中的function实现。

WebView.loadUrl("javascript:CallByNative()");

4 JS调用Native API:

window.myjs.runOnAndroidJavaScript();

协议 or 参数传递
使用json在js和native code之间传递参数是一个比较好的方法。以笔者实现的一个拉取本地联系人的Demo为例,数据的传递过程如下:

json是一种比较灵活而高效的格式,能够满足基本的数据通信的要求。

到此我们解决js和native code相互调用的问题,并且通过json能够进行数据的传输,实际上PhoneGap主要也就是实现了这些功能(当然,对各平台通用接口进行封装提供统一的js调用接口也是PhoneGap很重要的功能)。但是,仅仅这样的解决方案是无法满足产品开发的要求的,PhoneGap的某些致命缺陷需要我们自己动手来解决、并进行优化。

PhoneGap 存在的问题:
1 图形性能:渲染效率低
2 响应延迟:点击/输入
3 加载延迟:重内核/后退缓存
4 通信薄弱:只能轮询

对于1和4,这是html固有的缺陷,很难通过一般手段来改进,而3可以通过对页面进行精心的设计来避免这个问题。主要的设计方法包括用隐藏文本域来避免页面跳转等方法,这里不再详述。我们将主要精力放在对第2点,也就是UI响应的优化上。

在Android上直接运行PhoneGap的demo会发现,每一次点击的响应延迟基本在1s以上,这个严重影响了用户体验的流畅性,是完全不能接受的。好在这样的延迟响应不是性能问题,而是webkit内核对事件的处理逻辑导致的。

由于webkit最初是为pc设计的浏览器内核,因此webview在对事件进行处理时,要考虑的很全面。包括单击、双击、移动、按下、释放等事件,实际上最底层的事件就只有按下、释放和move这几个,其他如单击、双击等都是通过对它们的组合进行判断的,判断的逻辑如下:

通过上图大家应该能明白,在判断是单机还是双击时,系统需要一个延迟时间的,即300ms内连续收到两次点击事件,那么系统就认为发生了一次双击时间,否则就是两次单机而已。正是由于300ms这个时间窗口导致系统对点击反馈的延迟。然后,在手机上,我们是不需要处理双击这个事件的,所以我们可以改写webview这部分的处理逻辑,跳过对双击事件判断的等待,消除”300ms”的延时处理,就能让我们的UI快速单击单机事件了。

至此,优化后的PhoneGap才能更好的满足我们的产品需求。上面的优化只是针对Android平台,实际上在iOS上则无需这样进行优化PhoneGap就能获得很好的表现,因为Safari内核已经对这种情况有过优化了。

原创文章,转载请注明:转载自ian的个人博客[http://www.icodelogic.com]
本文链接地址: http://www.icodelogic.com/?p=326

tags:

11条评论

  1. hotstill 说:

    写得很好!

  2. Alen 说:

    iPhone上用PhoneGap做的应用,还是延迟很明显哦,如果是你说的渲染效率低的问题,我能够采取延迟加载的的策略吗?

    • ian 说:

      PhoneGap应用延迟的原因嘛,是因为文中所说的双击判断的300ms延迟,优化方案是自己重载WebView的事件处理逻辑。
      对于渲染低的问题,只能等待浏览器厂商发力了,延迟加载什么的治标不治本。其实safari的渲染效率还是挺不错的

  3. tjx 说:

    可以把源码贴出来吗?

  4. Ghost605 说:

    为什么没有优化的源代码!!!楼主贡献下

    • ian 说:

      由于是公司项目的一部分,而且由于优化部分的代码比较分散,所以我只说明了一下优化的大概方案,具体的代码一直没有整理。
      不过有好几位网友想要代码看一下,我这几天把代码整理一下后再发给大家看一下吧,大家共同研究研究。

  5. li 说:

    为什么没有优化的源代码!!!楼主贡献下
    麻烦发到我QQ邮箱,谢谢了。284768116@qq.com

发表评论

你需要先 登录 才能回复