此次的調研的重點是針對一個Android應用的基礎需求,用phonegap與JAVA實現的應用在性能及開發成本等方面的對比。
開發一個應用的最基本需求應該是流覽性需求,而在Android開發中ListView比較常用的控制項,廣泛被用於資料清單的展現上,而且也比較靈活。所以本次選擇用phonegap和JAVA各自實現一個ListView的內容展現功能的應用;同時引入另外一個常用元件GridView來實現圖片流覽的功能應用。
Delicious書簽訂閱應用
 
一、應用功能描述
Delicious書簽訂閱應用。進入應用首先展現訂閱的書簽源清單,點擊書簽源項,進入書簽源書簽清單頁,共展現最新的20條書簽。
資料來源由Delicious提供的JSON格式的資料。參考位址(HTTP://www.delicious.com/help/json
 
二、應用介面截圖
 
1、PhoneGap delicious bookmark
_21318225335  
2、JAVA delicious bookmark
_2011-10-11-11-36-351318304275  

三、功能測試對比
【測試機器為 Google Nexus One G5】

Android应用类型 Html5 (phonegap) Java
功能实现 Html + jQuery基础库 ListView组件
文件大小 159KB 23KB(只用了系统的原生界面)
内存占用 45.37MB(RSS) 27.02MB(RSS)
数据通信 Ajax Apache http Java功能包
启动速度 打开相同订阅源2.7秒 打开相同订阅源2.3秒
操作响应速度 正常操作速度流畅,频繁操作响应会变慢 操作速度流畅
Monkey注入5万个事件测试结果 Events injected: 50000:Dropped: keys=17 pointers=43 trackballs=0 flips=0 ## Network stats: elapsed time=1108130ms (0ms mobile, 1099670ms wifi, 8460ms not connected)
// Monkey finished
Events injected: 50000:Dropped: keys=28 pointers=53 trackballs=0 flips=0 ## Network stats: elapsed time=1216977ms (0ms mobile, 1216977ms wifi, 0ms not connected)
// Monkey finished
稳定性 在Monkey测试注入大约4万个事件时,整个应用已经处于空白无响应状态。有连接超时情况发生。手动频繁操作会引起,响应速度变慢,webkit的WebView不能很好释放内存,甚至会引起应用的crash。 能较好处理Activity切换延时等待。运行较为流畅。Monkey测试时书签列表页切换时有时候会出现黑色背景,然后再载入列表,比正常速度稍慢。能够比较好的释放内存,没有出现过应用crash的情况。
资源占用 对于频繁操作时,内存释放不够理想,导致内存占用上升。 内存占用相对比较稳定。
开发成本 运用html + css + javascript开发,适合前端人员开发。由于webkit在不同的终端机发行版本不一样,所以需要针对不同的机型进行适配。同时对于不同屏幕大小在适配上也只能通过Javascript进行控制实现。 适合有Java开发经验的程序员,可以充分利用Android提供的组件进行开发。但是开发学习成本较高。
开发难度 目前phonegap只使用一个WebView,开发时需要使用OPOA(One Page, One Application)的模式,对代码的组织方式及开发方式有较高要求。同时介于手机的资源有限,对如何管理和分配内存提出了要求。目前phonegap可以在控制台输出简单的JS调试日志,但是并不方便。 需要有Java开发经验,同时对Android开发体系有较深入的了解。
多人协作 OPOA模式并不利于多人协作并行开发,只能通过基础的javascript的设计模式来解决多人协作的问题。 比较方便支持多人协作并行开发。
其它问题 1、需要通过Javascript来管理操作的历史记录,并保证返回键能够正常使用;同样也包括选项键。2、不提供调用新的WebView,不能把现有的wap版的内容直接包装到应用当中。

 

空間圖片流覽應用
 
一、應用功能描述
在應用中創建一個gridview方式展示的圖片清單。 圖片總數 48, 16行3列。 原生app使用gridview佈局和渲染。webapp使用了jquery和jquery.mobile(後者依賴前者)
二、應用介面截圖
1、PhoneGap mm100 photo viewer
_2011-10-11-14-43-161318315412  
2、Android JAVA mm100 photo viewer
_2011-10-11-14-44-181318315471  
 
三、功能測試對比
 
【測試機器為 Google Nexus One G5】
Android应用类型 Html5 (phonegap) Java
功能实现 jQuery与jQuery Mobile基础库 GridView组件
文件大小 220KB 72KB
内存占用 40.6MB(RSS) 29.9MB(RSS)
启动速度 约7秒(js大小会直接影响速度) 约3秒
操作响应速度 在内容比较多的时候,都不是很流畅。调用外部交互:弹窗提示为例,会比原生大约有1s的延迟。 在内容比较多的时候,都不是很流畅。调用外部交互:原生app基本上瞬间响应。
Monkey注入5万个事件测试结果 Events injected: 50000:Dropped: keys=20 pointers=72 trackballs=0 flips=0 ## Network stats: elapsed time=1460305ms (0ms mobile, 1440448ms wifi, 19857ms not connected)
// Monkey finished
Events injected: 30002:Dropped: keys=7 pointers=10 trackballs=0 flips=0 ## Network stats: elapsed time=230436ms (0ms mobile, 230436ms wifi, 0ms not connected)
** System appears to have crashed at event 30002 of 50000 using seed 0
稳定性 由于交互深度较浅,所以整个Monkey测试过程较为流畅,但是还测试完毕后还是存在WebView内存无法释放的情况。 整个Monkey测试过程较流畅。
资源占用 Webapp占用内存约40.6M,占用应该主要是由于webapp是基于浏览器的,并且加载了一个java库所致。所以资源占用应该不是线性的。 占用内存约29.9M,内存占用相对比较稳定。
开发难度 对于比较简单的应用,在同样具备完善基础库的条件下,两者开发难度基本一致。
其它问题 1.内存优化:webapp因为是基于浏览器的,而浏览器自身是进行了相应的优化的,所以在图片显示上很不错。 原生app如果在一页中显示比较多的图片的时候,必须比较细致完善的进行内存优化工作,否则极易出现因为图片资源过大而引起的崩溃问题。
2.图片缩放裁切 webapp一般情况下通过js和css来进行缩放裁切。在进行图片动态缩放的时候,页面显示情况不是很正常(抖动,跳跃)。最好的办法是后端服务器对图片处理后再发送给手机端。
原生app可以直接通过java来对图片进行处理。
3.布局 原生app可以利用android提供的特殊技术方案,来自动适应多种分辨率的屏幕。如9png 和 多drawable目录。 相当简单方面。 但是在交互方面,原生app的开发量会比较大。
webapp就比较杯具一些了,需要开发者比较多的关注。 可以通过js来动态的获取屏幕尺寸进行资源调整和加载(开发几套不同的ui,然后根据分辨率js动态加载),这个会花费比较多的时间。
4.调试
webapp js调试不太方便,特别是调用外部应用的时候。如果是本应用内部,可以通过firebug进行调试。


總結
 
此次對比主要集中在對大量資料通信下web app UI性能。通過與JAVA app相比較,web app的UI性能會比JAVA app的UI性能差。主要原因是依賴webkit瀏覽器內核的渲染解析能力。同時在只有一個WebView的情況下,如何控制記憶體的上漲速度以無法釋放記憶體的情況無縫地重新開機WebView從而不影響使用者體驗,是一個現實待解決問題。
在非大資料量且不需要頻繁更新UI的情況下,基於wekit瀏覽器phonegap模式還是可以滿足Android開發應用的需求。同時應用的實現的效率還依賴于OPOA開發模式的JAVAscript基礎架構是否強大和高效。
對於不同解析度的螢幕,需要通過JS或者通過要集成的框架封裝來解決適配的問題。同時由於不同版本的Android所集成的webkit的版本不同,同樣也需要處理不同版本的在JavaScript和CSS支援上不同的相容性問題。還有解決開發時多人協作及方便的調試工具集成,也是進行html5 app開發的重要前提條件。
此次對比主要集中在對大量資料通信下web app UI性能。通過與JAVA app相比較,web app的UI性能會比JAVA app的UI性能差。主要原因是依賴webkit瀏覽器內核的渲染解析能力。同時在只有一個WebView的情況下,如何控制記憶體的上漲速度以無法釋放記憶體的情況無縫地重新開機WebView從而不影響使用者體驗,是一個現實待解決問題。
在非大資料量且不需要頻繁更新UI的情況下,基於wekit瀏覽器phonegap模式還是可以滿足Android開發應用的需求。同時應用的實現的效率還依賴于OPOA開發模式的JAVAscript基礎架構是否強大和高效。
對於不同解析度的螢幕,需要通過JS或者通過要集成的框架封裝來解決適配的問題。同時由於不同版本的Android所集成的webkit的版本不同,同樣也需要處理不同版本的在JavaScript和CSS支援上不同的相容性問題。還有解決開發時多人協作及方便的調試工具集成,也是進行html5 app開發的重要前提條件。
創作者介紹
創作者 shadow 的頭像
shadow

資訊園

shadow 發表在 痞客邦 留言(0) 人氣()