2012/03/04 
02:49 
0
2077
--args --allow-file-access-from-files --disable-web-security --disable-web-security
Third problem: image animations stutter
While keyframe animations made my vertical scrolling demo fly, they caused a severe slowdown in my photo gallery demo. I knew the slowdown wasn't JavaScript-related, since my table demo was so fast. It had to be deep in the guts of WebKit. After much experimentation I noticed that galleries with only three photos did not stutter. Turns out the problem occurred only when the width of the animated element was greater than 1024 pixels.
Third solution: avoid repaints
WebKit does all of its painting on the CPU and then uploads the results to the GPU in the form of an OpenGL texture. This process is slow, but once you have that texture, it can be drawn to the screen incredibly fast. This is the key to native scrolling speed.
Turns out that on iPhones, WebKit creates textures that are no larger than 1024 by 1024, and if your element is larger than that, it has to create multiple textures. It really doesn't want to do that, due to limited GPU memory, so it creates these textures only when it needs to, and then throws them away immediately after. In our case, the textures are created at the start of a CSS animation and then discarded when it ends. Therefore, the stutter in my photo gallery is caused by those large images being painted on the CPU and pushed to new textures on the GPU at the start of the animation.
来源：http://www.lis186.com/?p=2030
近年來smartphone大行其道，iPhone和Android的能見度越來越高，這些裝置內建的瀏覽器功能進展快速，對於HTML5和CSS3的支援程度有時候更勝於電腦上的瀏覽器。就因為如此，對於熟悉網站開發技術的開發者而言，這是一個跨入Mobile App的絕佳機會。因為我們不一定需要去學習Objective-C或Java這些不熟悉的語言才能開始撰寫行動裝置上的應用程式。就如同在在開發一般網路應用程式一樣，選擇一套好用的framework，絕對是事半功倍。很幸運的是因為時勢所趨，目前Mobile Web App Framework選擇性其實不少，不過到底有哪些？要怎麼選？就變成一個困難的課題了。
這些不同的Mobile Web App Framework，我認為在功能上應該可分為三大部份。
- UI Component：提供適用於觸控螢幕的UI元件
- Javascript Library：讓開發更有效率的Javascipt函式庫。
- Wrapper：把Mobile Web App包裝成原生軟體 (Native App)，同時提供一些function讓javascript可以存取一些底層的功能(例如：相機、檔案系統、各類sensor)。
如果只是要開發Mobile Web App，就不需要Wrapper。如果想包裝成native app上App Store或Android Market去賣，就得用上Wrapper。而UI Component和Javascript Library則是可以依照自己的喜好選擇用或不用。
下面的表格就是依照上面三大部份和支援的裝置整理出來的清單，轉跳後有各framework的簡要說明。
baseJS
官方網站：http://paularmstrongdesigns.com/projects/basejs/
最後穩定版本：1.0rc1 (2009/1/12)
檔案大小：8k
一套為Safari, Firefox和Mobile Safari設計的輕量化javascript framework，目前和以後都不支援IE。
iAd JS
官方網站：http://developer.apple.com/iad/
最後穩定版本：1.1.1 (2010/7/23)
檔案大小:225k
iAd JS是Apple為了iAd廣告而設計的javascript framework，只支援iOS4以上的iPhone和iPod Touch。不過已經有開發者把它用於app的開發。需要和Apple付費申請iOS Developer Program才能使用。
iUI: iPhone User Interface Framework
官方網站：http://code.google.com/p/iui/
最後穩定版本：0.31 (2009/10)
檔案大小：115k
iUI是一套包含Javascript library, CSS和影像的iPhone web app framework，能夠讓web app有和native app相同的外觀，並提供螢幕旋轉偵測。
Jo HTML5 mobile app framework
官方網站：http://joapp.com/
最後穩定版本：0.2.0 (2010/9/25)
檔案大小：41k
另一個為行動裝置設計的輕量javascript framework，對於HTML5的支援較其他framework豐富，包含WebQL, Audio。設計上比較特殊的部份在於UI元件的抽象化，因此能夠在不同的裝置上顯示對應的UI。
jQTouch
官方網站：http://www.jqtouch.com/
最後穩定版本：1.0beta2 (2009/10/6)
檔案大小：12k (別忘了還得加上jQuery的57k)
jQTouch是一個jQuery的外掛，jQuery的開發者能夠用最短的時間開發iPhone web app，支援自訂主題和extension。
jQuery Mobile
官方網站：http://jquerymobile.com/
最後穩定版本：預定於2010年底釋出
jQuery和jQiery UI的行動版本，強調跨裝置(Smartphone和Tablet)跨平台( iOS, Android, BlackBerry, bada, Windows Phone, webOS, symbian和MeeGo )，提供jQuery核心與UI widget。
PhoneGap
官方網站：http://www.phonegap.com/
最後穩定版本：0.9.1 (2010/6/8)
PhoneGap是一套開發原始碼的包裝軟體 (Wrapper)，能夠把Mobile Web App包裝成原生軟體，支援iPhone/iTouch, iPad, Google Android, Palm, Symbian和Blackberry。透過PhoneGap所提供的Javascript library，便可以取得聯絡人、加速計、位置資訊，還能控制震動。
Sencha Touch
官方網站：http://www.sencha.com/products/touch/
最後穩定版本：beta 0.96 (2010/10/1)
檔案大小：80k
由ExtJS、jQTouch和Raphael(一個SVG library)整合而成的HTML5 mobile web app framework，支援iPhone, iPad與Android觸控裝置。具有完整的touch event (tap, double tap, swipe, tap and hold, pinch和rotate)、data integration (Ajax, JSONp及YQL)和完善的UI元件。
iWebKit
官方網站：http://iwebkit.net/
最後穩定版本：5.04 (2010/3)
檔案大小：4k
一個輕量的iPhone mobile web app freamework，主要功能在於利用CSS3模擬navitve app的外觀。
MooTouch
http://dailyjs.com/2010/03/24/mootouch/
官方網站：http://gist.github.com/341230
最後穩定版本：(2010/3/31)
檔案大小：37k
MooTools javascript framework的外掛，目的在於模擬iPhone native UI。
Titanium Mobile
官方網站：http://www.appcelerator.com/products/titanium-mobile-application-development/
最後穩定版本：1.2.1 (2010/4/7)
Titanium Mobile讓你使用javascript、HTML5和CSS3就能打造iPhone和Android native app。因為它與OS深度整合，因此它能夠使用Camera、存取檔案系統、本地資料庫，在通訊方面則支援SOAP和YQL。如果功能還不夠，Titanium Mobile也允許使用Objective-C和Java擴充，再運用javascript呼叫。
PastryKit
官方網站：無
原始檔：
http://help.apple.com/iphone/3/mobile/dist/PastryKit-ug-compact.js
http://help.apple.com/iphone/3/mobile/dist/PastryKit-ug-compact.css
Apple官方自己使用的javascript library，在iPhone上Safari預設書籤裡的iPhone使用手冊(用iPhone打開才看得到效果)就是使用PastryKit打造而成的。PastryKit能夠讓Mobile Safari有著和native app有相同的外觀（隱藏網址列、固定位置的工具列、重新定義頁面捲動）。因為不是公開的framework，因此目前沒有正式的文件，目前僅有零星幾篇介紹和功能說明。
UiUIKit
官方網站：http://code.google.com/p/iphone-universal/
最後穩定版本：2.1 (2008/9)
UiUIKit是一個模擬iPhone native UI的HTML/CSS3 framework，並提供原始的PSD影像檔。
Unify
官方網站：http://unify.github.com/unify
最後穩定版本：1.0 (2010 Q3)
檔案大小：41k
在destop, smartphone和tablet上模擬native app的web app framework，能夠與Adobe AIR和Phone Gap整合，算是支援平台最廣的framework，不過在2011 Q3才會提供tablet的UI元件。
WebAPP.Net
官方網站：http://webapp-net.com/
最後穩定版本：0.5.2 (2010/2/6)
檔案大小：25k (javascript部份)
一個輕量化的javascript iPhone web app javascript framework，提供基本的UI元件與AJAX功能(附php proxy供跨網域存取)。
XUI
官方網站：http://xuijs.com/
最後穩定版本：1.0.0 (2010/5/28)
檔案大小：7.8k
PhoneGap的開發團隊認為現代javascript framework (例如：jQuery, Ext, MooTools等)在行動裝置上載入過於緩慢。因為這些framework都有很強大的跨瀏覽器相容性，而在手持裝置上這些並沒有必要。於是他們打造了為行動裝置瀏覽器最佳化的XUI。XUI目前支援WebKit, Fennec和Opera，未來也有計畫IE Mobile和BlackBerry。
語法與jQuery相近，實作了方便的選取器, DOM操作, Event handeling, Style, Fx與XHR。
zeptojs
官方網站：http://github.com/madrobby/zepto
最後穩定版本：(2010/10/8)
檔案大小：1.6k
為行動裝置最佳化的javascript framework，相容於iOS 4+, Android 2.2+和webOS 1.4.5+，語法與jQuery相近。
以上就是我所知的Mobile Web App Framework，如果有任何錯誤或需要增修的地方，歡迎在下面留言。
在过去几年，许多跨平台框架已经出现。随着移动设备的普及越快越广，特别是移动应用程序快速发展的市场，跨平台框架领域爆炸式地增长。本书涵盖了许多关注于应用程序开发的流行框架。框架分为两类：有助于利用跨平台 API 创建原生移动应用程序的框架；有助于构建运行于 Web 浏览器中的跨平台界面的 HTML/CSS/Javascript 框架。常见的做法是结合这些技术来创建跨平台原生应用程序。本书讲述了原生跨平台框架： Rhodes 、 PhoneGap 和 Titanium 。这些框架都列举在下面，还包括本书没有提到的许多框架。
● Rhodes 和 RhoSync —— 来自于 Rhomobile ，在 MVC 框架中使用 Ruby 实现跨平台业务逻辑，并利用 HTML 、 CSS 和 JavaScript 实现 UI 。可选的 RhoSync 服务器支持客户端 - 服务器端数据的同步。借助 Rhodes ，能够构建针对 iPhone/iPad 、 Android 、 BlackBerry 和 Windows Mobile 的应用程序。该客户端框架采用 MIT 许可证，其 RhoSync 服务器框架采用 GPL并提供商业许可选择。主页是 http://rhomobile.com/ 。
● PhoneGap —— 来自于 Nitobi ，使用 HTML 、 CSS 和 Javascript 以及支持原生应用程序开发的项目和函数库来创建运行于 Phone/iPad 、 Android 、 BlackBerry 、 Palm 和 Symbian上的应用程序，采用开源 MIT 许可证，主页是 http://www.phonegap.com/ 。
● Titanium Mobile —— 来自于 Appcelerator ，使用 JavaScript 和自定义 API 来构建针对 iPhone 和 Android 的原生应用程序。 Titanium 是一个开源框架，基于 Apache 2 许可证发布，主页是 http://www.appcelerator.com 。
● QuickConnectFamily —— 使用 HTML 、 CSS 和 JavaScript 构建运行于 iPhone/iPad 、 Android 、 BlackBerry 和 WebOS 上的应用程序。 QuickConnectFamily 模板使你能够访问通常限制于“原生”应用程序的操作。能够跨越所有支持的平台进行完全数据库访问。主页是 http://www.quickconnectfamily.org/ 。
● Bedrock ——来自于 Metismo ，交叉编译器将 J2ME 源代码转化为原生 C++ 代码，同时将产品部署到 Android 、 iPhone 、 BREW 、 Windows Mobile 和其他平台上。 Bedrock 是一组专用库和工具。主页是 http://www.metismo.com 。
● Corona ——通过 Lua 脚本语言开发运行于 iPhone 、 iPad 和 Android 之上的原生应用程序。 Corona 是一个专用框架。主页是 http://anscamobile.com/corona/ 。
● MoSync SDK ——使用 C/C++ 通过 MoSync 库构建针对 Symbian 、 Windows Mobile 、 j2me 、 Moblin 和 Android 的应用程序。 MoSync 是一个专用框架。主页是http://www.mosync.com/ 。
● Qt Mobility ——使用 C++ 和 Qt API 开发针对 S60 、 Windows CE 和 Maemo 的应用程序。 Qt( 发音“ cute ” ) 是一款跨平台应用程序开发框架，被广泛应用于 GUI 程序的开发。 Qt mobility 项目将 Qt 移植到了移动平台上。它基于 LGPL 协议作为开源框架发布。主页是 http://labs.trolltech.com/page/Projects/QtMobility 。
● Adobe Flash Lite ——使用 ActionScript( 一种类似 JavaScript 的专用脚本语言 ) 构建跨平台应用程序文件 (SWF) ，在支持 Flash Lite 的设备上作为应用 程序 运行。 Adobe Flash Lite 是一个专用平台。主页是 http://www.adobe.com/products/flashlite/ 。
● Adobe AIR —— Adobe 致力于将 Flash Player 10 的全部功能推广到大部分移动设备上，但是，这些工作都关注于基于 Web 的应用程序而不是原生应用程序。 Adobe AIR( 在编写本书时，指 Android 的测试版 ) 支持开发人员在移动浏览器之外将 Flash 应用程序作为独立应用程序运行。主页是 http://www.adobe.com/products/air/ 。
● Unity ——一个著名的游戏开发平台，支持部署到 Mac 、 Windows 或者 iPhone 。 Unity 支持 3 种脚本语言—— JavaScript 、 C# 、 Boo(Python 的变种 ) 。他们表示从 2010 年夏季开始发布对 Android 、 iPad 和 PS3 的支持。主页是 http://unity3d.com/ 。
除了这些开发原生应用程序的框架外，还有许多通过创建 HTML 、 CSS 和 JavaScript 开发移动 Web 应用程序的框架。这些框架中有很多只不过是一些常用的样式、图形元素的集合，但是，在使用本书讨论的技术开发跨平台应用程序时，这些跨平台 HTML 框架是节省时间的必要工具。本书最后一部分介绍了 Sencha 、 jqTouch 和 iWebKit 。下面列举了各种 ( 包括本书未提及的 ) 工具：
● Sencha Touch —— JavaScript 框架，通过 HTML5 和 CSS3 构建具有原生外观的移动 Web 应用程序，支持 iOS 和 Android 。 Sencha Touch 开源框架采用 GNU GPL 许可证 v3 ，同时提供商业授权选择。主页是 http://sencha.com 。
● JQTouchA —— JQuery 插件，创建类似于 iPhone 的应用程序，为 Safari 桌面和移动浏览器优化，采用 MIT 许可证发布。主页是 http://jQTouch.com 。
● iWebKit —— HTML5 和 CSS3 框架，支持 iOS 原生和 Web 应用程序，采用 GNU Lesser GPL 许可证发布。主页是 http://iWebkit.net 。
● iUI —— JavaScript 和 CSS 框架，构建运行于 iOS 上的移动 Web 应用程序，采用新的 BSD 许可证发布。主页是 http://code.google.com/p/iui/ 。
● xUI —— 轻量级的 JavaScript 框架，目前被 PhoneGap 采用。当前支持 iOS 应用程序，未来会尝试支持 IE 移动浏览器和 BlackBerry 。当前采用 GNU GPL 许可证发布。主页是http://xuijs.com 。
● Magic Framework —— HTML 、 CSS 和 JavaScript 框架，用于开发快速和平滑的 iPhone 感观的应用程序，采用原生外观的小组件、列表等。同时，提供一种简单的 HTML5 数据库存储接口，采用 Creative Commons Attribution 3.0 United States 许可证发布。主页是 http://www.jeffmcfadden.com/projects/Magic%20Framework 。
● Dashcode —— Apple 开发的框架，支持开发人员利用 HTML 、 CSS 和 JavaScript 创建针对 OSX 的简单、轻量级小组件和针对 iOS 的移动 Safari 应用程序。当前采用 Creative Commons Attribution-ShareAlike 许可证可用。主页是 http://developer.apple.com/ leopard/overview/dashcode.html 。
● CiUI —— 由技术新闻 Web 站点 CNET.com 开发，用于开发其 Web 站点 iPhone 友好的版本，采用 MIT 许可证发布。主页是 http://code.google.com/p/ciui-dev/ 。
● Safire —— 开源 Web 应用框架，采用 HTML 、 JavaScript 和 CSS 编写，支持 iOS ，采用 MIT 许可证发布。主页是 http://code.google.com/p/safire/ 。
● iphone-universal(UiUIKit) —— HTML 和 CSS 框架，用于 iPhone 的 Web 开发，包括类似于 iPhone 上的 SMS 的聊天气泡。采用 GNU GPL 许可证 v3 发布。主页是http://code.google.com/p/iphone-universal/ 。
● WebApp.Net —— 轻量级的 JavaScript 框架，利用 WebKit 浏览器控件构建应用程序，支持 iOS 、 Android 和 WebOS 。采用 Creative Commons Attribution-ShareAlike 许可证发布。主页是 http://WebApp.net 。
● Dojo —— 灵活的、可扩展的 JavaScript 框架，主要用于创建 Web 应用程序。主页是 http://dojotoolkit.org 。
● Jo —— 针对 HTML 5 应用程序的轻量级 JavaScript 框架，最初的目标是支持 PhoneGap 。版权属于 Dave Balmer, Jr ，有效期为 2010 年。本框架采用一个自定义许可证 ( 采用“概不负责”的许可证分发 ) 。主页是 http://grrok.com/jo/ 。
除了以上列表之外，还有其他跨平台移动框架、库和工具。可以从该列表中选取一些作为参考。
