微调HTML5 Phonegap应用程序

Question

设法构建HTML5应用程序。以下库已用于此：

• jquery.mobile-1.1.1.min.js
• jquery.mobile-1.1.1.min
• lawnchair.js

每件事情都很好用Phonegap封装它 cordova-2.0.0

但是注意到应用程序非常慢。

我的应用实际上 ajax 请求获取 Json 并加载用户界面（主要是列表视图）

是否有任何性能改进技术可以让我的应用程序更快地运行？

还有哪些工具可以测试它？

定位平台： Android 和 iOS 。

修改：

有一件事已经注意到，应用程序的缓存大小在每click和page转换时都会增加（以MB的形式达到的时间）..虽然已禁用ajax缓存..我是否需要采取关心其他事情？

Answer 1

你可以通过以下方式提高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（Simon MacDonald的想法）。在你的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毫秒延迟。（jjsquared的想法）<登记/>
7。使用Slpash屏幕。
8。仅在必要时避免使用框架。尝试做出响应式设计。
9。不要在服务器上生成UI。在客户端用JavaScript创建UI
10。最大限度地减少回流

• 减少DOM元素的数量。
• 之前“离线”最小化对DOM Update元素的访问 重新插入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
});

Answer 2

如果你想让它在Android上更高效，你应该禁用一些CSS：

https://stackoverflow.com/a/12081339/41679

Answer 3

有一种称为预取的机制​​，它会在您单击之前加载页面。因此重定向更快。但是你正在使用更多转移。

它的用法如下：

<a href="prefetchThisPage.html" data-prefetch> ... </a>

检查此网站： http://jquerymobile.com/test/docs/pages/page-cache.html

Answer 4

要提高点击性能并避免本机内置于移动浏览器中的300毫秒浏览器延迟，您应该使用FastClick等库。这将大大减少mobile.changePage调用之间的滞后。

https://github.com/ftlabs/fastclick