16

我们都知道使用 RequireJS 的好处。我想知道在开发 Cordova 应用程序时是否需要考虑性能因素（尤其是在像 Android 2.x 这样可能会很慢的平台上）。假设我正在编写一个 SPA 并在导航到新视图时动态加载一个模块 - 即使我从文件系统加载，也不会存在延迟问题吗？而不是在应用程序最初加载时加载我的所有 JavaScript 资产？

是的，我知道我可以测试自己 - 我只是想知道是否有人已经测试过性能！

4

2 回答 2

14

如果您使用 r.js 至少连接（如果不优化，当所有资产都是本地的时，这可能对某些人有疑问的好处）您的模块，除了您的初始加载之外，您将不会从文件系统加载应用。通过使用诸如“文本”等加载器插件，甚至您的 HTML/模板资产也可以内联到您的级联文件中的模块中，因此模板的加载只是函数调用的“性能命中”。解决@Gajotres 的观点，您可以订购脚本标签并首先包含 Cordova，或者如果您是 require.js 2.1.0（我相信）或更好，则可以通过 require.config 填充它。所以 - 简而言之，如果您将 require.js 用于混合移动设备，请不要跳过连接步骤。假设您已将模块连接到“构建”的 js 文件中，此时性能将取决于您无法控制的因素（设备、本机 webview 实现等）和您可以控制的其他因素......比如：

  • 应用程序的总体复杂性是多少？如果它是静态视图，那么显示/隐藏已经存在的 DOM 元素将比需要一个需要模板模块并使用任何模板引擎等呈现模板的模块更快。
  • 假设它不是静态视图，深度嵌套的 DOM 结构（例如）会让您对性能、重排等问题感到沮丧。

总的来说，Andrew Trice 有一篇关于移动端用户体验注意事项的精彩文章：http ://www.tricedesigns.com/2013/03/11/performance-ux-considerations-for-successful-phonegap-apps/

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

于 2013-05-31T17:15:33.340 回答
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 2.1.0，当时 Cordova 延迟加载开始与 Require.js 发生冲突，甚至到了两个框架定义和 require 函数相互冲突的程度。还有一个 RequireJS 没有等待 deviceready 事件的问题，这导致其他一些框架出现问题。

目前，从 Cordova 版本 2.7.0 开始，所有问题都已修复。但我不能向你保证，还有其他问题要解决。

让我们也谈谈其他问题。目前您担心 Require.js 会导致 Phonegap 的执行问题。即使在当前最新的 Corodva 版本中这是真的，这也不是什么大问题。

您需要担心要使用什么框架来创建混合应用程序。目前不存在完美的框架，即使您创建了一个纯 JavaScript 应用程序，您仍然无法创建“原生外观”应用程序。即使是上一代手机也只是缓慢地为您提供外观丰富的 UI 和原生外观的应用程序行为。

根据我的经验，在开发混合应用程序时，只有 3 种可用的方法可以创建近乎良好的应用程序体验：

  1. 煎茶触摸
  2. Ex jqMoby（现为英特尔 AppFramework）
  3. 纯 JavaScript 应用

Require.js、curl.js 或任何类似的框架在这​​里对你没有多大帮助。

最后一件事，请特别注意ifandelse的答案，虽然有点偏离主题（如我的编辑部分），但它比 Require.js Phonegap 兼容性更重要。

于 2013-05-31T15:45:29.180 回答