典型PhoneGap应用程序的启动速度有多快？加快提示？

Question

我想知道你加载简单的PhoneGap应用程序的速度有多快。 我的简单应用程序在Galaxy S3上需要6-8秒（所有资源都存储在本地驱动器中）。不确定PhoneGap是否正常。

任何人都可以在2-3秒内完成加载？有什么提示让它加载更快？

Answer 1

轶事数据：

我的phonegap应用程序可以在iPad上加载2秒钟（从点击图标）3.即便如此，建议您使用启动画面插件来保持启动，直到您的应用程序的UI已加载，以防止任何闪烁等等。

你可以做的事情：

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

在我的一个应用程序中，文件系统提供后备数据。虽然文件系统很快，但没有理由在等待时阻止用户界面的初始显示。虽然暂时会有一个初始的空白界面，但这是可以的 - 实际上，Apple的启动屏幕指南是将用户界面显示为无人居住。 （并非大多数人同意或遵循建议）。

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

2）减少起始资产的数量/数量

启动时可以加载的脚本，样式表等越少越好。大多数Web视图在尽可能多地管理这些视图方面相当不错，但从根本上说，Web视图需要加载的数据越多，只是为了显示您的UI，您的应用程序的加载时间就越慢。 （这就是为什么Apple对启动画面的建议有意义：几乎立即显示一个无人居住的UI应该可以帮助用户感觉应用程序已经快速加载，即使它没有。我不完全相信这个论点.. ！）

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

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

插件需要时间进行初始化，并且在调用deviceready之前这样做。你拥有的插件越多，你的应用程序开始运行的时间就越长。如果你可以在deviceready之前抛出一个无人居住的用户界面，你可以在某种程度上缓解这种情况，但这只有在你没有完全依赖于一个或多个正在加载的插件时才有效。再次，这就是启动画面插件很有用的原因。）

4）在UI出现之前，避免任何复杂的计算

当然，如果可能的话。即使您的应用程序需要推送数据（比如在首次启动时创建数据库），首先抛出UI，然后在处理数据时抛出微调器。如果您的应用需要计算复杂的内容，请首先调出UI，然后处理您的数字。

5）了解某些加载时间不受控制

必须加载本机包装器，然后必须初始化Web视图（这需要时间），然后必须加载cordova.js（以便在本机和Web端之间进行接口）。这是你真正无法避免的东西（尽管如果你没有使用Cordova的任何功能，你可以避免使用cordova.js。但是为什么不在这种情况下只构建一个更简单的shell - 根本不需要使用Cordova。 ）

6）设备差异很大

当然，一台设备上的加载时间与另一台设备上的加载时间无关。这在任何平台上都是如此，但我怀疑它在Android上更加明显，因为设备的成本范围很广。一个缓慢的Android设备显然需要花费更长的时间来加载您的应用程序而不是顶级的Android模型。对于较新的设备也是如此。例如，如果我的应用程序可以在全新的iPad上以2s加载，那么在旧硬件上可能会花费更长的时间。 （对我来说，我认为如果我可以在iPad 3上加载应用程序2-3秒 - 这不是最新的 - 它应该在更新的硬件上加载更快）。

最后：

我不确定你在这里的负载时间是否会超过1-2秒。我还可以说2-3次加载时间通常不难实现 - 我没有在我的大多数应用程序中付出任何特别的努力，并且它们可以快速有效地加载。 （事实上​​，我的一个原生应用程序加载速度比我的phonegap应用程序慢 - 4秒对2-3。）

Answer 2

你可以通过以下方式提高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;
    }

使用正确的图片尺寸（不要在HTML中缩放图片） 在可扩展的分布式系统上托管图像（即S3） 避免使用404s图像

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

3. 避免使用大量CSS.Limit阴影和渐变链接框阴影，边框半径，渐变，文本对齐 尝试禁用一些减慢它的CSS。在你的jquery mobile .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来更好地下载它们并在本地使用。
6。 FastClick FastClick是一个简单易用的库，用于消除物理点击与移动浏览器点击事件触发之间的300毫秒延迟。

7。使用Slpash屏幕。
8。仅在必要时避免使用框架。尝试做出响应式设计。
9。不要在服务器上生成UI。在客户端用JavaScript创建UI
10。最大限度地减少回流

• 减少DOM元素的数量。
• 尽量减少对DOM更新元素的访问权限＆＃34;离线＆＃34;之前 重新插入DOM。
• 避免在JavaScript中调整布局

<强>慢

$("#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;
});

使用缓存静态数据LocalStorage，Database＆amp;文件 的慢

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

});

<强>快

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

});

12。不要等待数据显示用户界面

// Display view
displayView();

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