跨平台移动开发实战（十）------与native集成

现在各大平台群雄逐鹿，推出各种让人炫目的feature，基于HTML5开发最大的弊病就是无法享受最新最炫的native feature和性能问题，而Phonegap的价值就在于此，它就是为了让你既能基于HTML5享受跨平台的便利，又能享受native的feature。因此，这里就通过对phonegap的分析，来看看如何能更好地让HTML5长在native上。

分析完phonegap在三大平台上的源码（phonegap源码分析（一）------ android，phonegap源码分析（二）------ Windows Phone和phonegap源码分析（三）------ IOS），会发现phonegap就是基于各大平台上的webview，把它作为跨平台的虚拟机，把HTML5作为字节码，以此打造Mobile上的Java。它那些所谓集成native的plugin实际上是苦力活，把各大平台共有的特性都包装了一遍，所以，它的未来寄希望于两点，一是各mobile平台能大力发展HTML5，提升其性能和功能。二是，能紧跟各平台的最新发布，尽快地把最新特性以plugin的方式include进来。因此phonegap不是一个什么很绝妙的框架，它是基于一个很简单的构想，但要做得尽可能的完善和细节，并且更新速度要快。

我前面也提到过，不是所有的应用都适合用phonegap来做，如何评估，关键要看这个webview是否能很好承载你的应用。这块我研究不多，但从网上的一些文章来看，webview的性能是存在问题的，很多人做过测试，拿同样的页面在webview和browser上跑，webview的性能是低于browser的，并且就算是不亚于browser，browser和原生应用也是没法比的，撇开JS的优化（这是一个很大的主题）不谈，phonegap相关的性能损耗主要是以下几点：

• JS与Native的互调
  
• HTML UI与native UI的差距
  
• 性能与跨平台间的平衡

对于第一点，其实这是最可以忽视的点，通过对phonegap源码的分析，损耗在JS与Native的互调上的代价其实并不大，除了Android取调用结果之外，其他都是直接的本地方法调用，并且JS与Native的互调并不是发生在每时每刻。

而对于HTML UI与native UI的差距，这个是性能问题体现得最为明显的地方。在桌面平台上尚且如此，更别提在mobile上，因此对UI交互要求很高的应用，得重点考察一下是否能容忍这块的差距。对于如何提升UI性能和流畅性，我还没来得及做很深入的研究，就目前的学习情况来看，可以朝以下几个方面来做：

• 通过template技术，把HTML打散，避免一个html太大，http://floatlearning.com/2011/05/how-well-does-phonegap-scale/，这篇文章介绍一些template solution
• 选择最合适的UI框架，就目前来看Jquery mobile在性能上我是不满意的，以后我会重点考察一下JQTouch
• 优化dom render，比如减少reflow的cost，http://floatlearning.com/2011/06/the-cost-of-reflows-on-a-web-app/
• 性能提升小tips，http://floatlearning.com/2011/03/developing-better-phonegap-apps/，这篇文章介绍了几个很关键的tips

对于性能与跨平台间的平衡，就是要考虑哪些点是需要通过plugin放在native端来做的，JS的执行性能虽然近年来有了明显的提升，但还是没法和native比的，所以如果存在cpu密集型的运算时，得考虑是否有必要牺牲跨平台性在native端来做块，不过，phonegap就是好在给了我们这个平衡的选择性，起码我们还是有路可走。

性能优化的工作对于跨平台mobile开发来说是非常关键的，绝不能以牺牲用户体验的代价来方便自己，虽然，不太可能做到与native app不相上下，但不断提升性能是我们不能忽视的工作。