使用像RequireJS这样的AMD加载器和PhoneGap / Cordova应用程序是否明智?

时间:2013-05-31 14:25:33

标签: cordova requirejs

我们都知道使用RequireJS的好处。我想知道在开发Cordova应用程序时是否需要考虑性能因素(特别是在像Android 2.x这样可能比较慢的平台上)。假设我正在编写SPA并在导航到新视图时动态加载模块 - 即使我从文件系统加载,也不会出现延迟问题?与在应用最初加载时加载我的所有JavaScript资产相反?

是的,我知道我可以测试自己 - 我只是想知道那里的人是否已经测试了性能!

2 个答案:

答案 0 :(得分:14)

如果你使用r.js来至少连接(如果没有优化,这可能会对所有资产都是本地资产的某些问题带来可疑的好处)你的模块,你将不会从初始文件系统加载加载您的应用程序。通过使用诸如“文本”等的加载器插件,甚至您的HTML /模板资产也可以内嵌到连接文件中的模块中,因此加载模板只是函数调用的“性能”。要解决@Gajotres's point,您可以先订购脚本代码并首先包含Cordova,或者如果您需要.js 2.1.0(我相信)或更好,请通过require.config进行填充。所以 - 简而言之,如果你使用require.js进行混合移动,请不要跳过连接步骤。假设您已将模块连接到“构建”的js文件中,那么性能将取决于您无法控制的因素(设备,本机Web视图实现等)以及您可以控制......像:

  • 应用程序的整体复杂性是什么?如果它是静态视图,则显示/隐藏已存在的DOM元素将比需要模板需要模板模块并使用任何模板引擎等呈现模板更快。
  • 假设它不是静态视图,深层嵌套的DOM结构(例如)可以让你对性能,回流等感到悲伤。

总的来说,Andrew Trice在移动设备的UX考虑因素方面做得很好:http://www.tricedesigns.com/2013/03/11/performance-ux-considerations-for-successful-phonegap-apps/

如果应用程序不是非常复杂,那么一个简单的构建步骤可以使您的手动模块连接起来(这样您在开发时可以获得较低的认知开销,加上一个文件的构建输出)可能就足够了。但除非你连接模板(以js模块可访问的格式),否则你必须在某些时候加载它们......

答案 1 :(得分:12)

让我根据自己的经验告诉你。

虽然require.js是一款优秀的工具,但与Phonegap一起使用时存在一些延迟问题,主要是在较慢的设备上。它甚至可能非常烦人。当然总是有解决方法但是如果你需要一个解决方法来使它正常工作,那么使用require.js有什么意义。

在加载一些旧版本的cordova.js文件时甚至会出现一些问题,因此只有通过经典脚本标记以及在require.js之前以常见方式加载它才能加载它:

<script type="text/javascript" src="libs/cordova-2.1.0.js"></script>
<script data-main="js/main" src="libs/require-jquery.js"></script> 

与require.js和Phonegap / Cordova一起使用时,某些框架会导致jQuery Mobile等问题。基本上所有需要尽快使用DOM的东西都会导致问题。还有一些解决方法,还有什么意义。

最后,通过一些播放和修复,您可以获得明显的性能提升,但 DON'T 期望桌面环境得到提升。

编辑:

当Cordova延迟加载开始与Require.js发生冲突时,Cordova 2.1.0开始出现真正的问题,它甚至走到了两个框架都已定义并要求与另一个框架发生冲突的功能。还有一个问题是RequireJS没有等待deviceready事件导致其他一些框架出现问题。

目前,所有问题都已在Cordova 2.7.0版本中修复。但我不能保证你想要出现其他一些问题。

我们也谈谈其他问题。目前你担心Require.js会导致你在Phonegap.Even中遇到执行问题,如果在目前最后一个Corodva版本中这是真的,这不是一个大问题。

您需要担心要用什么框架来创建混合应用程序。目前还没有完美的框架,即使你创建了一个纯粹的javascript应用程序,你仍然无法创建一个“本机外观”应用程序。即使是上一代移动电话也只是放慢速度,以便为您提供具有原生外观应用行为的丰富外观。

根据我的经验,在使用混合应用程序时,只有3种方法可以创建近乎完美的应用体验:

  1. Sencha touch
  2. Ex jqMoby(现为英特尔AppFramework)
  3. 纯JavaScript应用
  4. Require.js,curl.js或任何类似的框架在这​​里根本没有帮助你。

      

    最后一件事,特别注意 ifandelse answer,   虽然有点偏离主题(比如我的编辑部分)但它有更多   然后重要的是Require.js Phonegap兼容性。