问典型的PhoneGap应用程序的启动速度有多快？提高速度的小贴士？

EN

轶事数据：

我的phonegap应用程序在iPad 3上可以在2秒内加载(从点击图标开始)。即使如此，我们还是建议你使用闪屏插件来保持闪屏，直到你的应用程序的UI加载完毕，以防止任何闪烁等。

你可以做的事情：

1)不要等待数据开始显示用户界面。

在我的一个应用程序中，文件系统提供了备份数据。尽管文件系统速度很快，但没有理由在等待时阻止用户界面的初始显示。虽然最初会有一个空白界面，但这是可以的--事实上，苹果对闪屏的指导方针是显示用户界面，就像它是未填充的一样。(并不是大多数人都同意或遵循这个建议)。

如果您正在加载任何网络数据，也是如此--尽快显示UI，以消除应用程序加载缓慢的感觉。然后，如果你的数据加载速度很慢，就设置一个微调器。用户将看到您的应用程序已快速加载，并且网络现在是瓶颈。

2)减少起始资产的规模/数量

可以在启动时加载的脚本、样式表等越少越好。大多数web视图都很擅长尽可能多地流水线处理这些内容，但从根本上讲，web视图需要加载的数据越多，仅仅为了显示你的UI，你的应用程序的加载时间就越慢。(这就是为什么苹果对闪屏的建议是有道理的:几乎立即显示未填充的UI是为了帮助用户感觉应用程序加载得很快，即使它还没有加载。我并不完全被这种说法说服……)

本质上，您应该尝试加载生成未填充UI所需的最少数量的资产，然后在显示后加载其余资产。如果这需要时间，抛出一个旋转器。

3)将插件数量减少到应用程序功能所需的最少数量

插件需要时间来初始化，并且它们在调用deviceready之前进行初始化。你的插件越多，你的应用程序运行的时间就越长。如果你可以在deviceready之前抛出一个未填充的UI，你可以在一定程度上缓解这个问题，但只有当你不完全依赖于一个或多个正在加载的插件时，这才有效。这也是为什么闪屏插件有用的原因。)

4)在显示UI之前，避免在启动时进行任何复杂的计算

当然，如果可能的话。即使你的应用程序需要推送数据(比如在第一次启动时创建一个数据库)，也要先抛出UI，然后在处理数据时抛出一个微调器。如果你的应用程序需要计算一些复杂的东西，首先抛出UI，然后再计算你的数字。

5)理解某些加载时间是您无法控制的

必须加载本机包装器，然后必须初始化web视图(这需要时间)，然后必须加载cordova.js (以便在本机和web端之间进行接口)。这是您确实无法避免的事情(尽管如果您不使用任何Cordova的功能，则可以避免使用cordova.js。但是，为什么不在这种情况下构建一个更简单的shell --根本不需要使用Cordova。)

6)设备千差万别

当然，一个设备上的加载时间与另一个设备上的加载时间无关。这在任何平台上都是正确的，尽管我怀疑这在Android上更明显，因为设备的价格范围很广。显然，一台运行缓慢的安卓设备加载你的应用程序所需的时间要比一流的安卓机型要长得多。这通常也适用于较新的设备。例如，如果我的应用程序可以在全新的iPad上加载2秒，那么在旧硬件上加载的时间可能会稍长一些。(对我来说，我认为如果我能在2-3秒内在iPad 3上加载应用程序--这不是最新的--它在新硬件上的加载速度应该会更快)。

最后：

我不确定你在这里的加载时间会不会低于1-2秒。我还可以说，2-3秒的加载时间通常不难实现--我没有在我的大多数应用程序中投入任何特别的努力，它们加载速度快，效率高。(事实上，我的一个原生应用程序的加载速度比我的phonegap应用程序慢-- 4秒对2-3秒。)

您可以通过以下方式提高app的运行速度：

1.使用项目中包含的js的精简版本的。

2.避免使用较大尺寸的图片。使用兼容web的PNG文件调整它们，使用CSS Sprite工作表优化图像

​

   .icon {
      width: 14px; height: 14px;
      background-image: url("glyphicons-halflings.png");
    }
    .icon-glass {
      background-position: 0 0;
    }
    .icon-music {
      background-position: -24px 0;
    }
    .icon-search {
      background-position: -48px 0;
    }

使用合适的图像大小(不要在超文本标记语言中缩放图像)在可伸缩的分布式系统(如S3)上托管图像避免图像的404

<img src="{{pic}}" onerror='this.src="nopic.jpg"'/>

避免使用太多的CSS.Limit阴影和渐变链接框-阴影，边框半径，渐变，文本对齐尝试禁用一些减慢它的。在jquery移动.css文件中，将以下内容添加到底部：

* {
text-shadow: none !important;
-webkit-box-shadow: none !important;
-webkit-border-radius:0 !important;
-webkit-border-top-left-radius:0 !important;
-webkit-border-bottom-left-radius:0 !important;
-webkit-border-bottom-right-radius:0 !important;
-webkit-border-top-right-radius:0 !important;
}

4.使用CSS过渡+硬件加速使用原生滚动

5.如果您使用任何Live url来获得更好的JS，请下载它们并在本地使用。

6. FastClick FastClick是一个简单易用的库，用于消除在移动浏览器上物理点击和触发点击事件之间的300ms延迟。

7.使用Slpash屏幕。

8.仅在必要时避免使用框架。试着做出响应式设计。

9.不在server.Create上生成UI客户端在JavaScript中生成UI

10.最小化回流

在重新插入到DOM之前，

• 会减少对DOM更新元素的DOM elements.
• Minimize访问次数。
• 避免调整JavaScript

中的布局

slow

$("#header a.back").on("click", clickHandler);
$("#header a.back").css("color", "white");
$("#header a.back").css("text-decoration", "none");
$("#header a.back").attr("href", "#");

快速

var $backButton = $("#header a.back");
$backButton.on("click", clickHandler);
$backButton.css("color", "white");
$backButton.css("text-decoration", "none");
$backButton.attr("href", "#");

11.避免网络访问不要让应用程序依赖网络来获取内容

$.ajax({url: "services/states"}).done(function(data) {
    states = data;
});

使用缓存Static Data LocalStorage、数据库和文件slow

$.ajax({url: "slow/feed"}).done(function(data) {

});

fast

dataAdapter.getItems().done(function(data) {

});

12.不要等待数据显示UI

// Display view
displayView();

// Get data
$.ajax({url: "product/101"}).done(function(product) {
    // Update view
});